Go back

Avatar Group

Stacked overlapping avatars with overflow counter. Sizes match Avatar. Use for assignee lists, team rosters, attendance.

Sizes

xs / sm / md / lg / xl

Each size matches the corresponding Avatar size; overlap is proportional.

xs
AT
BC
CR
DC
+2
sm
AT
BC
CR
DC
+2
md
AT
BC
CR
DC
+2
lg
AT
BC
CR
DC
+2
xl
AT
BC
CR
DC
+2
private readonly AvatarGroup.AvatarItem[] _team = new[] { new AvatarGroup.AvatarItem(Initials: "AT", Tooltip: "Aiko Tanaka", Color: "blue"), new AvatarGroup.AvatarItem(Initials: "BC", Tooltip: "Ben Carter", Color: "purple"), new AvatarGroup.AvatarItem(Initials: "CR", Tooltip: "Camila Rivera", Color: "pink"), }; <AvatarGroup Items="_team" Size="xs" Max="4" /> <AvatarGroup Items="_team" Size="sm" Max="4" /> <AvatarGroup Items="_team" Size="md" Max="4" /> <AvatarGroup Items="_team" Size="lg" Max="4" /> <AvatarGroup Items="_team" Size="xl" Max="4" />

Overflow

Max controls visible avatar count

Remaining items collapse into a +N counter on the right.

Max=2
AT
BC
+4
Max=4
AT
BC
CR
DC
+2
Max=8
AT
BC
CR
DC
EO
FA
<AvatarGroup Items="_team" Size="md" Max="2" /> <AvatarGroup Items="_team" Size="md" Max="4" /> <AvatarGroup Items="_team" Size="md" Max="8" />

Inline with assignment label

Compose with surrounding text

The component is inline-flex, so it sits naturally inside a row.

Assigned to
AT
BC
CR
+3
and 3 others
<div style="display: flex; align-items: center; gap: var(--spacing-3);"> <span>Assigned to</span> <AvatarGroup Items="_team" Size="sm" Max="3" /> <span>and 3 others</span> </div>
An unhandled error has occurred. Reload 🗙

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.