Avatar Group
The AvatarGroup component is used to visually represent a collection of users or entities in a compact and organized layout. It's ideal for showcasing team members, collaborators, or participants, and is often used in dashboards, cards, and collaborative tools. AvatarGroup handles overlapping, spacing, and overflow logic to ensure clarity even with limited space.
AvatarGroup is used to display a collection of user avatars together, typically for showing team members or participants in collaborative features.
Basic Avatar Group
The simplest use case: showing multiple avatars grouped horizontally.
Limiting Displayed Avatars
You can limit the number of avatars shown using the max prop. Additional avatars are collapsed into a counter (e.g. +2).
Custom Spacing
Customize the gap between avatars using the spacing prop.
Avatar Variants in Group
You can combine avatar shape variants like rounded and square inside the group.
Custom Surplus Renderer
Customize the overflow display using the renderSurplus prop for more control over surplus appearance.
