When to use the avatar group ?
Use an avatar group when you want to display a collection of avatars.
Use cases
To display few avatars
When a group of avatars contains less than 3 avatars (for the default size) or 4 avatars (for the compact size), the avatars are placed next to each other.
To display a long list of avatar
When a group of avatars contains more than 3 avatars (for the default size) or 4 avatars (for the compact size), only the first avatars are displayed. The others are hidden behind the text “+ [number of hidden avatars]”.
If a user is inactive, he will be listed with the inactive avatar followed by an inactive text.
Do / Don't
|
DO |
DON’T |
To diplay several Avatars use an Avatar group component |
Do not diplay standalone Avatars next to each other to simulate an Avatar group |
|
|
|
|
DO |
DON’T |
At least 2 avatars in the list |
Have only one avatar in this case simply put the avatar component |
|
|
|
|
DO |
DON’T |
Hover to open the dropdown |
Click to open the dropdown |