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.

import { AvatarGroup, Avatar } from 'reablocks';


export default function App() {
  return (
    <AvatarGroup>
      <Avatar name="Ben Franklin" />
      <Avatar name="Teddy Roosevelt" />
      <Avatar name="Bugs Bunny" />
    </AvatarGroup>
  )
}

import { AvatarGroup, Avatar } from 'reablocks';

export default function App() {
  return (
    <AvatarGroup>
      <Avatar name="Ben Franklin" />
      <Avatar name="Teddy Roosevelt" />
      <Avatar name="Bugs Bunny" />
    </AvatarGroup>
  )
}

+3 more

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)

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 group `string`
`size`	The maximum number of avatars to show before +x more `number`	`10`
`theme`	Theme for the AvatarGroup `AvatarGroupTheme`

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.

Avatar Badge