yarn add @smashing/avatar

Subtle(default) appearance

<Avatar name="Sasha Ho" />

Solid appearance

<Avatar name="Sasha Ho" appearance="solid" />

Size

<Avatar name="Sasha Ho" size={64} />

With photo

<Avatar name="Sasha Ho" src="https://i.imgur.com/6EITnfO.png" />

Subtle colors

<Avatar name="Sasha Ho" color="blue" />
<Avatar name="Sasha Ho" color="green" />
<Avatar name="Sasha Ho" color="neutral" />
<Avatar name="Sasha Ho" color="orange" />
<Avatar name="Sasha Ho" color="purple" />
<Avatar name="Sasha Ho" color="red" />
<Avatar name="Sasha Ho" color="teal" />
<Avatar name="Sasha Ho" color="yellow" />

Solid colors

<Avatar name="Sasha Ho" color="blue" appearance="solid" />
<Avatar name="Sasha Ho" color="green" appearance="solid" />
<Avatar name="Sasha Ho" color="neutral" appearance="solid" />
<Avatar name="Sasha Ho" color="orange" appearance="solid" />
<Avatar name="Sasha Ho" color="purple" appearance="solid" />
<Avatar name="Sasha Ho" color="red" appearance="solid" />
<Avatar name="Sasha Ho" color="teal" appearance="solid" />
<Avatar name="Sasha Ho" color="yellow" appearance="solid" />

Colors based on hash value

<Avatar name="Anonymous User" hashValue="id-10" />
<Avatar name="Anonymous User" hashValue="id-20" />
<Avatar name="Anonymous User" hashValue="id-30" />

Stack

<AvatarStack>
  <Avatar name="Anonymous User" hashValue="id-10" />
  <Avatar name="Anonymous User" hashValue="id-20" />
  <Avatar name="Anonymous User" hashValue="id-30" />
</AvatarStack>

Stack with limit

<AvatarStack limit={2}>
  <Avatar name="Anonymous User" hashValue="id-10" />
  <Avatar name="Anonymous User" hashValue="id-20" />
  <Avatar name="Anonymous User" hashValue="id-30" />
</AvatarStack>

Stack with limit and without show more

<AvatarStack limit={2} showMore={false}>
  <Avatar name="Anonymous User" hashValue="id-10" />
  <Avatar name="Anonymous User" hashValue="id-20" />
  <Avatar name="Anonymous User" hashValue="id-30" />
</AvatarStack>