How to build an accessible AvatarGroup in React
The stack is a labelled group; the +N chip carries an i18n-defaulted aria-label ("{count} more") so the hidden count is announced, not conveyed by the chip text alone
When to use a AvatarGroup
- Showing several people compactly as an overlapping stack (collaborators, attendees, reviewers)
- Capping a long list of avatars with a +N overflow chip
- A facepile in a card header, table cell, or activity row
When not to use it
- A single identity with a name — use User or Avatar
- A selectable list of people — use a list/menu with checkboxes
Accessibility
Role group, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <AvatarGroup>{hundredsOfAvatars}</AvatarGroup> with no max
Prefer: <AvatarGroup max={5} total={120}>{avatars}</AvatarGroup>
Without a max the row grows unbounded; a cap plus total keeps it compact and accurate
Example
<AvatarGroup><Avatar fallback="A" /><Avatar fallback="B" /><Avatar fallback="C" /></AvatarGroup>