Avatar Stack

Avatar Stack displays multiple Avatars next to each other.

Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.

When to use

  • To show multiple Avatars in small spaces, such as lists or tables.
  • When visual identification for a user or entity is optimal or required.

When not to use

  • To display a single avatar that will only ever be one Avatar, such as to the left of an entity's title (see Do and Don’t examples below). Instead, use the Avatar component.

Best practices

Do

Do use Avatar Stack to show multiple users or entities in small spaces, such as lists or tables.

Don't

Don't line up or group large numbers of Avatars where space is limited.

Do

Do use the single (1) Avatar Stack variant amongst other Avatar Stacks, such as a table displaying users in teams.

Don't

Don't use the single (1) Avatar Stack variant for an individual Avatar, such as the Avatar next to the left of an entity's title.

Do

Do use an Avatar Stack to represent multiple Avatars from a single type (users or entities).

Don't

Don't mix types (users and entities) inside an Avatar Stack.