Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Usage Guidelines
Identification
Do
For proper user identification, hovering an avatar in a group triggers a tooltip with a full name.
Don't
Don't exclude the Tooltip when hovering; this would omit information that can help identify an avatar's profile.
Overflow
A counter component styled similarly 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.
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.
Don't
Don't allow groups to stack without limit.
Related Components