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.

<Avatar name="Jeroen Ransijn" size={40} />
Hide code

Solid avatar

Use the isSolid property to create a solid avatar

<Avatar isSolid name="Jeroen Ransijn" size={40} />
Hide code

Avatar with image

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

  name="Alan Turing"
Hide code

Colors explained

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

  <Avatar name="Steve Jobs" size={40} marginRight={16} />
  <Avatar name="Bill Gates" size={40} marginRight={16} />
  <Avatar name="Elon Musk" size={40} marginRight={16} />
Hide code

Manually override the color

<Avatar isSolid color="green" name="Jeroen Ransijn" size={40} />
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.

  <Avatar hashValue="id_124" name="Anonymous User" size={40} marginRight={16} />
  <Avatar hashValue="id_249" name="Anonymous User" size={40} marginRight={16} />
  <Avatar hashValue="id_299" name="Anonymous User" size={40} marginRight={16} />
Hide code

Avatar Props

The src attribute of the image. When it's not available, render initials instead.
sizenumber = 24
The size of the avatar.
The name used for the initials and title attribute.
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 = false
When true, render a solid avatar.
colorstring = 'automatic'
The color used for the avatar. When the value is `automatic`, use the hash function to determine the color.
getInitialsfunc = globalGetInitials
Function to get the initials based on the name.
forceShowInitialsbool = false
When true, force show the initials. This is useful in some cases when using Gravatar and transparent pngs.
sizeLimitOneCharacternumber = 20
When the size is smaller than this number, use a single initial for the avatar.
Theme provided by ThemeProvider.