AvatarGroup
Overlapping avatars from a data array with optional max-visible truncation and overflow pill.
AvatarGroup turns an avatars array into a compact cluster of Avatar faces. Each entry uses the same src, alt, and fallback shape as a lone avatar; size and direction apply to the whole row or column.
Faces overlap on the inline or block axis so collaborators read as one unit. Set maxVisible and overflowText (for example +3) when the list is longer than the strip should show; omit those when every face should render. The group root is a plain div — put names, counts, or actions beside it in layout primitives, not inside the group.
When to use
- Project or document collaborators in a tight strip
- Overflow when only a few faces should stay visible
When not to use
- A single identity → Avatar
- Spaced list rows where each face needs its own name → Avatar + Stack per row
Related
- Avatar — one face with photo or fallback
- Badge — status on a child (wrap a single avatar, not the group root)
- Stack — labels and actions beside the cluster
Common examples
Overlap with overflow
Horizontal overlap is the default. Set maxVisible and overflowText when the list is longer than the strip. Put names or counts in nearby Text, not inside the group.
Vertical overlap
direction="vertical" stacks faces on the block axis. Same avatars shape; still keep labels outside the group.
Ask your agent
Show up to three collaborator avatars beside the project title, then a +N overflow for the rest.Last updated on