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.

Username fallback

When src is not set (or null), pass a username to render an SVG avatar with the user's initials instead. Use the optional bg and fg props to customize the background and text colors.

<Avatar username="Jane Doe" />
<Avatar username="Jane Doe" bg="#c05959" />
<Avatar username="Jane Doe" bg="#dae5ff" fg="#334b81" />