An avatar group shows multiple avatars.
The avatar spread is the default configuration for multiple avatars.
The avatar stack is a more condensed configuration in which the avatars overlap each other.
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.
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.
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.
To include a focus state, use
createFocusOutlineStyle. Don’t forget to include a tab index so that the interaction the avatar enables is accessible to people navigating via keyboard.