AvatarGroup
AvatarGroup is used to both display a group of user avatars and, optionally, control actions related to the users group.
Props
Usage guidelines
- For the general display of groups of people, companies and/or brands.
- In cases where an affordance for adding collaborators is needed.
- Displaying a group of people, companies and/or brands in a square format. Use AvatarPair instead.
Accessibility
ARIA attributes
AvatarGroup requires accessibilityLabel
. AvatarGroup is a group of elements that require a parent label describing both the data presented and the call to action in the case of button and link roles. As seen in the example below, the screen-reader reads: "Collaborators: Keerthi, Alberto, and 10 more. Add collaborators to this board."
If AvatarGroup is used as a control button to show/hide Popover-component, we recommend passing the following ARIA attributes to assist screen readers:
accessibilityControls
: informs the screen reader that AvatarGroup controls the display of an anchored Popover-component. It populates aria-controls.accessibilityHaspopup
: informs the screen reader that there’s a Popover-component attached to AvatarGroup. It populates aria-haspopup.accessibilityExpanded
: informs the screen reader whether an anchored Popover-component is currently open or closed. It populates aria-expanded.
Localization
Be sure to localize accessibilityLabel
.
Variants
Fixed sizes
AvatarGroup is available in 3 fixed height sizes: xs
(24px) , sm
(32px), and md
(48px).
Responsive sizing
AvatarGroup is a responsive component. Avatar Groups that are not given a size prop or use size fit
will expand to fit to the width of their parent container. A common use case is to achieve column-based sizing. Resize the width or number of avatars to see the AvatarGroup change to match the width of the Column it's been placed in.
Collaborators display
AvatarGroup displays up to three user avatars. More users, if present, will be displayed as a numerical count for the md
and fit
sizes.