Avatar

The following components are available to display an avatar of a user:

• <Avatar>
• <AvatarStack>

Examples

Single Avatar

Use the <Avatar> component to display a single avatar.

<Avatar src="https://hyvor.com/image.png" />

Size

<Avatar src="https://hyvor.com/image.png" size="small" />
<Avatar src="https://hyvor.com/image.png" size="medium" />
<Avatar src="https://hyvor.com/image.png" size="large" />
<Avatar src="https://hyvor.com/image.png" size={64} /> <!-- any custom width -->

Avatar Stack

Wrap multiple <Avatar> components with <AvatarStack> to display them as a stack.

<AvatarStack>
    <Avatar src="https://hyvor.com/image.png" />
    <Avatar src="https://hyvor.com/image.png" />
    <Avatar src="https://hyvor.com/image.png" />
</AvatarStack>

If you set a size in your <Avatar>s, make sure to set the same size to the <AvatarStack> component.