Avatar Group β

Avatar groups are a collection of avatars representing multiple users.

Status

The status of the component

Ready for use!

Figma component

A link to the Figma library where the component lives.

Open in Figma

Repository

A link to the repo where the component lives.

Open link

Usage Guidelines

Avatar Group component.

Identification

❌ Don’t

Don't exclude the Tooltip when hovering; this would omit information that can help identify an avatar's profile.

✅ Do

For proper user identification, hovering an avatar in a group triggers a tooltip with a full name.

Overflow

A counter component styled similar to the Avatar is available at the end of any Avatar Group stack to manage overflow. Hovering this counter displays a list with the rest of the user's names overflowing the set.

❌ Don’t

Don't allow groups to stack without limit.

✅ Do

Manage the overflow of avatars in groups by adding a counter that displays full names in a tooltip when hovered over to identify users properly.

Tooltips

A component that appears on hover which provides additional contextual help or information.

Something looks broken on this site?

Report it to the Design System team here!

Avatar Group β

Component checklist