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
razor
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
razor
<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
and 3 others
AT
BC
CR
+3
razor
<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>