Avatar Compact Group
A tighter version of the Avatar Group for dense spaces: small avatars overlapping more closely, followed by a count chip that states the total.
Preview
Type
Q3 launch plan
Due Friday
When to use
- In table cells, kanban cards and list rows, where a full group would crowd its neighbours.
- When the number of people matters as much as who they are.
Reach for something else
- Where there is room and the faces carry the meaning: that is an Avatar Group.
Anatomy
- 1
Avatars
Two or three small faces, closely overlapped.
- 2
Count chip
A soft pill beside the stack with the remaining number.
States
Default
A few faces and the chip.
No overflow
When everyone fits, the chip is dropped.
Hover
The chip darkens where it opens the full list.
Accessibility
- The whole group has one accessible name with the total, such as "12 assignees".
- The small avatars are decorative within that name, so the list is not read face by face.
Source
The Avatar Compact Group is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
Tell me when the source landsTell me when the source landsand you'll get 10% off your first licence if you ever want the full library.
See it in a block