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>