Avatar Group
Below are practical implementation examples of theAvatarGroup component, showcasing different configurations such as max user limit, spacing, variant styling, and accessibility-friendly usage. These examples are designed to help you apply AvatarGroup effectively across team or user-related interfaces.
The AvatarGroup component helps visually group multiple avatars in a compact and meaningful layout, often representing users in a shared context.
AvatarGroup Implementation Variants
Basic AvatarGroup
Display a horizontal group of avatars with default overlap.
Max Avatars
Limit the number of visible avatars using the max prop.
Custom Spacing
Control the spacing between avatars.
Shape Variants
Mix avatar shape variants like square and rounded.
Total Avatars
You can indicate the total number of avatars using the total prop, even if not all are rendered.
Custom Surplus Renderer
Customize the overflow display using the renderSurplus prop for more control over surplus appearance.
