AvatarGroup

Alpha component

AvatarGroup component is subject to major changes and is for experimentation purposes only. Not recommended for use in production software.

Avatars can be displayed as group. The maximum visible Avatars in a group will be 3. If there are more than 3 Avatars in the group, the rest of the Avatars will be shown inside a Menu with their Avatar image and name (the alt text).

Import

import { AvatarGroup } from '@contentful/f36-avatar';

Examples

Variants

The group can be rendered in two variations

  • spaced - default variant
  • stacked

Sizes

The group can be rendered in two different sizes

  • Small - 24px
  • Medium - 32px, default size

Props (API reference)

Open in Storybook

Name

Type

Default

children
ReactElement<AvatarProps, string | JSXElementConstructor<any>> | ReactElement<AvatarProps, string | JSXElementConstructor<any>>[]

className
string

CSS class to be appended to the root element

size
"small"
"medium"

testId
string

A [data-test-id] attribute used for testing purposes

variant
"stacked"
"spaced"

Accessibility

The displayed menu for not rendered Avatars is keyboard accessible via tab and arrow keys. The menu items are not interactive.