Avatar

View on GitHub

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
<Avatar name="Jeroen Ransijn" size={40} />
code Hide code

Solid avatar

Use the isSolid property to create a solid avatar

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

Avatar with image

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

<Avatar
  src="https://pbs.twimg.com/profile_images/756196362576723968/6GUgJG4L_400x400.jpg"
  name="Jeroen Ransijn"
  size={40}
/>
code Hide code

Colors explained

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

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

Manually override the color

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

Avatar Props

srcstring
The src attribute of the image. When it's not available, render initials instead.
sizenumber = 24
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 = 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.
themeobjectrequired
Theme provided by ThemeProvider.