AvatarStack

Table of contents

- Default example
- Right aligned
System props
AvatarStack Component props

AvatarStack is used to display more than one Avatar in an inline stack.

Default example

<AvatarStack>
  <Avatar alt="Primer" src="https://avatars.githubusercontent.com/primer"/>
  <Avatar alt="GitHub" src="https://avatars.githubusercontent.com/github"/>
  <Avatar alt="Atom" src="https://avatars.githubusercontent.com/atom"/>
  <Avatar alt="Desktop" src="https://avatars.githubusercontent.com/desktop"/>
 </AvatarStack>

<AvatarStack>
  <Avatar alt="Primer" src="https://avatars.githubusercontent.com/primer"/>
  <Avatar alt="GitHub" src="https://avatars.githubusercontent.com/github"/>
  <Avatar alt="Atom" src="https://avatars.githubusercontent.com/atom"/>
  <Avatar alt="Desktop" src="https://avatars.githubusercontent.com/desktop"/>
 </AvatarStack>

Right aligned

<AvatarStack alignRight>
  <Avatar alt="Primer" src="https://avatars.githubusercontent.com/primer"/>
  <Avatar alt="GitHub" src="https://avatars.githubusercontent.com/github"/>
  <Avatar alt="Atom" src="https://avatars.githubusercontent.com/atom"/>
  <Avatar alt="Desktop" src="https://avatars.githubusercontent.com/desktop"/>
 </AvatarStack>

<AvatarStack alignRight>
  <Avatar alt="Primer" src="https://avatars.githubusercontent.com/primer"/>
  <Avatar alt="GitHub" src="https://avatars.githubusercontent.com/github"/>
  <Avatar alt="Atom" src="https://avatars.githubusercontent.com/atom"/>
  <Avatar alt="Desktop" src="https://avatars.githubusercontent.com/desktop"/>
 </AvatarStack>

System props

AvatarStack components get COMMON system props, AvatarStack.Item components do not get any system props. Read our System Props doc page for a full list of available props.

AvatarStack Component props

Name	Type	Default	Description
alignRight	Boolean		Creates right aligned AvatarStack

Edit this page on GitHub

1 contributor

Last edited by emplums on May 12, 2020