Stacked Avatars can be used to show multiple collaborators or participants when there is limited space available.
An AvatarStack displays a minimum of 2 Avatars and a maximum of 4 Avatars.
- Use
AvatarStack when space is limited
- Don't use
AvatarStack if there is adequate space to show 4 Avatars or less.
<AvatarStack>
<Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
<Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
<Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
<Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
</AvatarStack>
<AvatarStack size={48}>
<Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
<Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
<Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
<Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
</AvatarStack>
The default AvatarStack is left-aligned. You can right-align the component for layouts that are better suited for it.
<AvatarStack alignRight>
<Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
<Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
<Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
<Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
</AvatarStack>
By default, Avatars will spread out to reveal themselves when you hover over the stack.
<AvatarStack disableExpand>
<Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
<Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
<Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
<Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
</AvatarStack>
See the AvatarStack Storybook stories.
Loading data for avatar_stack...
