Avatar group Preview

Resources

Types

Avatar spread

The avatar spread is the default configuration for multiple avatars.

Avatar stack

The avatar stack is a more condensed configuration in which the avatars overlap each other.

Avatar pie

The avatar pie shows two to three avatars in a single circular container. It’s used in cases where space is extremely limited, like the Teams group chats.

Behavior

Overflow

If there are more than five people or groups to represent, the fifth avatar slot can show an overflow avatar to indicate an exact number of associated entities. Single avatars are not always interactive and may not receive focus. However, overflow avatars can generally display a popup menu with a detailed list of people.

Activity and presence

Both the avatar spread and stack support displaying activity rings. The spread can also display presence badges.

The avatar pie can’t display activity or presence.

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 text representation of their status, like a tooltip.

By default, avatars are static elements that don’t have states built in. However, if you include additional interactions to provide more context or information, be sure to author in states and keyboarding interactions.

Be sure to include a tab index so that the interaction the avatar enables is accessible to people navigating via keyboard.