The Avatar component is used to represent users. And should only be used for users.

Basic subtle avatar

Use the size property to set the width and height of a avatar. The initials will size automatically.

JR
Hide code

Solid avatar

Use the isSolid property to create a solid avatar

JR
Hide code

Avatar with image

Use the src property to create a avatar with a image.

Hide code

Colors explained

The color of an avatar is automatically generated based on the name provided.

SJ
BG
EM
Hide code

Manually override the color

JR
Hide code

Rendering anonymous users with different colors

In some cases user avatars are displayed without knowing the name of the user. It's possible in those cases to use a id as the hashValue property to automatically determine the color.

AU
AU
AU
Hide code

Avatar Props

srcstring
The src attribute of the image. When it's not available, render initials instead.
sizenumber
The size of the avatar.
namestring
The name used for the initials and title attribute.
hashValuestring
The value used for the hash function. The name is used as the hashValue by default. When dealing with anonymous users you should use the id instead.
isSolidbool
When true, render a solid avatar.
colorstring
The color used for the avatar. When the value is `automatic`, use the hash function to determine the color.
getInitialsfunc
Function to get the initials based on the name.
forceShowInitialsbool
When true, force show the initials. This is useful in some cases when using Gravatar and transparent pngs.
sizeLimitOneCharacternumber
When the size is smaller than this number, use a single initial for the avatar.