display contract
AvatarGroup
Stacked avatars with overlap. Truncates with "+N" when over the limit.
Variants
- default
- Right-overlapping stack
- reverse
- Left-overlapping — for chat read receipts
Sizes
- sm
- 24pt avatars, -8pt overlap
- md
- 32pt avatars, -10pt overlap
- lg
- 48pt avatars, -16pt overlap
Example
<AvatarGroup users={members} max={4} size="md" />Usage rule
Default max is 4 visible; remaining go into a "+N" tile in the same size.
The full AvatarGroup contract has 3 more rules, plus the do-not patterns. Get the full recipe.