Avatar Group

Overview

Avatar Group stacks multiple avatars into a compact, overlapping cluster for representing teams, collaborators, and shared ownership. Built from the Avatar component, it supports flexible avatar counts and an action item for overflow counts or quick-add interactions, making it the go-to choice for any multi-user display.

When should you use them?

Use an avatar group when several people share a context and you want to show them compactly, like collaborators on a document, members of a team, or attendees of an event. Use a single avatar when only one person needs to be represented.

How should you use them?

• Use an avatar group for multiple people in a shared context; use a single avatar for one person.
• Show only the first few avatars and use the Number action item to indicate how many more.
• Use the Icon action item for a quick-add control, like inviting more members.
• Keep the stacking order and overlap consistent so the cluster stays readable.
• Match the size to context, keeping it consistent with nearby standalone avatars.
• Provide an accessible summary so screen readers convey who and how many are in the group.