AvatarGroup
A compact stack of avatars with a +N overflow chip. Each avatar carries a canvas ring, so the overlap stays legible in both themes.
Examples
Basic
ALGHATED +1
Show code
<AvatarGroup items={team} max={4} />Sizes
ALGHATED +1
ALGHATED +1
ALGHATED +1
Show code
<AvatarGroup items={team} size="sm" />
<AvatarGroup items={team} size="lg" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { src?: string; name?: string }[] | — | People, passed through to Avatar (image, initials or icon). |
max | number | 4 | How many avatars to show before the +N chip. |
size | "sm" | "md" | "lg" | "md" | Avatar size, applied to the overflow chip too. |
The overflow chip only appears when items exceed max. Native
attributes are spread onto the group, so class and aria-label work as expected.