AvatarStack
AvatarStack displays two or more Avatars in an inline stack.
React
readyNot reviewed for a11y
Rails
readyNot reviewed for a11y
Figma
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.
Best practices
- Use
AvatarStackwhen space is limited - Don't use
AvatarStackif there is adequate space to show 4 Avatars or less.
React examples
Default
Custom size
Right-aligned
The default AvatarStack is left-aligned. You can right-align the component for layouts that are better suited for it.
No spread on hover
By default, Avatars will spread out to reveal themselves when you hover over the stack.
More code examples
See the AvatarStack Storybook stories.
Props
AvatarStack
| Name | Default | Description |
|---|---|---|
children | ReactNodeA set of Avatar components to stack | |
alignRight | false | booleanAlign the avatars to the right |
disableExpand | false | booleanDo not spread the avatars on hover |
size | 20 | number | { narrow?: number; regular?: number; wide?: number; }The size of the avatar children in pixels. |
className | stringClass name for custom styling. | |
sx | SystemStyleObject |