Avatar

import { Avatar } from '@elemental-ui-alpha/avatar';

Usage

<Avatar name="Jane Smith" />

Color

The color of an avatar is automatically generated based on the name provided. You can however explicitly set the color if desired.

<Cluster gap="small">
  <Avatar name="Yellow" color="yellow" />
  <Avatar name="Red" color="red" />
  <Avatar name="Purple" color="purple" />
  <Avatar name="Blue" color="blue" />
  <Avatar name="Teal" color="teal" />
  <Avatar name="Green" color="green" />
</Cluster>

Size

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

<Cluster gap="small">
  <Avatar name="Small" size="small" />
  <Avatar name="Medium" size="medium" />
  <Avatar name="Large" size="large" />
</Cluster>

Source

Use the src property to create an avatar with an image. Avoid images that include logos or text, as they tend to be undesirably cropped.

<Avatar
  name="Dan Abramov"
  src="https://dan.church/static/media/holydan.45aa25fd.jpg"
/>

Disabled

Though not interactive itself, an Avatar may be in a disabled state to suit the interface around it.

<Avatar disabled name="Dan Abramov" />