Avatar - Evergreen — ContextQMD

Basic

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

jsx

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

Avatar with image

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

jsx

<Avatar
  src="https://upload.wikimedia.org/wikipedia/commons/a/a1/Alan_Turing_Aged_16.jpg"
  name="Alan Turing"
  size={40}
/>

Colors explained

The color of an avatar is automatically generated based on the name provided. You can also manually override the color with color.

jsx

<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} />
  <Avatar name="Allen Kleiner" color="green" size={40}/>
</Pane>

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.

jsx

<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>