Avatar group Preview

An avatar group shows multiple avatars.

Resources


Types

Avatar pile

The avatar pile separates each avatar and works well in scenarios where there’s sufficient space in the layout.

Avatar stack

Avatar stack

The avatar stack is a more condensed configuration in which the avatars overlap each other and works well where space is confined.


Behavior

Overflow

If there are more people or groups than can fit within a defined space, show an overflow avatar in the last available slot to indicate an exact number of associated entities. Single avatars are not always interactive and so may not receive focus. However, overflow avatars can generally display a popup menu to show a detailed list of people.

Avatar overflow

Activity and presence

Both the avatar pile and stack support activity rings but neither support presence badges.

Avatar activity ring

Accessibility

It may be difficult for people with visibility impairments to perceive the icon in presence badges on medium avatars (32 pixels) and smaller. Where possible, accompany these avatars with a textual representation of their status.