Skip to content
Primer/Interface guidelines
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactReact BrandViewComponents
ContributeAbout
On this page

Avatar stack

AvatarStack displays two or more avatars in an inline stack
On this page
A diagram of three avatars stacked next to each other.

Usage

Stacked avatars can be used to show multiple collaborators or participants when there is limited space available. When you hover over the stack, the avatars will reveal themselves.

Best practices

  • Use AvatarStack when space is limited
  • Don’t use AvatarStack if there is adequate space to show 4 avatars or less.

Anatomy

Avatar stack displays a minimum of 2 avatars and a maximum of 4 avatars. Only the 20px avatar size is currently used in the avatar stack.

Options

Alignment

The default AvatarStack is left-aligned. You can right-align the component for layouts that are better suited for it.

Related components

Edit this page on GitHub
1 contributoremilybrick
Last edited by emilybrick on December 13, 2022