synthetic
AvatarGroup
A stacked, overlapping row of avatars with a "+N" overflow.
Project teamFour people, two shown and the rest folded into +2
MCJW+2
MC
MCJWPNLS
MCJWPN+1
MCJWPN+1
In context
Project cardsWho is on each project
Harbour rebrand
Led by Maya Chen
MCJW
On trackTideline mobile
Led by Jonas Weber
MCJWPN
ReviewCrew interviews
Led by Priya Nair
MCJWPNLS
LateProps
| Prop | Type | Required | Default |
|---|---|---|---|
avatars | AvatarGroupItem[] | Yes | — |
max | number | undefined | No | 5 |
size | number | "sm" | "md" | "lg" | "xl" | undefined | No | — |
className | string | undefined | No | — |
Overflow
Renders real Avatars with negative-margin overlap. Anything past max (default 5) collapses into one overflow Avatar whose fallback is "+N".
data-rebar-* attributes
data-rebar-component="avatar-group" on the root; each item is a real Avatar with its own attributes.
Migrating to Ant Design
AntD's Avatar.Group is a close direct equivalent: avatars / max map to children / maxCount.