AvatarGroup
The AvatarGroup
component is designed to efficiently display a collection of user avatars,
making it ideal for showcasing team members, participant lists, or any group of users.
It smartly handles large numbers of avatars by showing a set maximum number on the screen,
with an additional indicator for the number of hidden avatars.
Quick Start
To start using the AvatarGroup
component, import it and the Avatar
component from the reablocks
library and provide the appropriate name
props.
Examples
Basic Usage
The AvatarGroup component arranges multiple Avatar components together, indicating excess avatars when surpassing the specified maximum size:
Theme Customization
AvatarGroup supports theming to ensure its appearance aligns with the overall design of your application. The default theme settings include:
- root{}(3 keys)
- Show all
Learn more about how to customize in the Theme documentation.
API
Customization options available through the AvatarGroup component's properties:
Prop | Description | Default |
---|---|---|
children * | The avatars to display in the group.ReactNode | |
className | Additional CSS classes to apply to the avatar groupstring | |
size | The maximum number of avatars to show before +x morenumber | 10 |
theme | Theme for the AvatarGroupAvatarGroupTheme |
Design and Usability Tips
- Expandable Details: Provide a mechanism (e.g., tooltip or modal) to view all avatars in a group on click or hover, ensuring users can access every member's profile without cluttering the UI.
- Customizable Views: Allow users to customize the visibility and ordering of avatars in a group, accommodating personal preferences and improving the experience.