Avatar

The Avatar component can be used to show a visual representation of a user or entity. It helps to quickly identify users or objects.

<Avatar name="Alice Smith">
  <Avatar.Image
    alt="Alice Smith's avatar"
    src="https://thispersondoesnotexist.com/image"
  />
</Avatar>

Instead of an image, the initial of the name or a placeholder icon can be used

<>
  <Avatar name="Alice Smith">
    <Avatar.Initial />
  </Avatar>
  <Avatar>
    <Avatar.Placeholder />
  </Avatar>
</>

When an image src is missing it will fallback to the initial of the name.

<Avatar name="Alice Smith">
  <Avatar.Image alt="" src="" />
</Avatar>

When the name is also missing it will fallback to the placeholder icon.

<Avatar name="">
  <Avatar.Image alt="Alice Smith's avatar" src="" />
</Avatar>

When <Avatar.Initial /> is used but the name is missing, it will fallback to the placeholder icon.

<Avatar name="">
  <Avatar.Initial />
</Avatar>

An onClick prop can be used, this will make the component focusable using the keyboard, as it uses a <button> under the hood.

<Avatar name="Alice Smith" onClick={() => alert('Thanks for clicking')}>
  <Avatar.Initial />
</Avatar>

When disabled, the onClick won't work.

<Avatar
  name="Alice Smith"
  disabled
  onClick={() => alert('This message will not appear')}
>
  <Avatar.Initial />
</Avatar>

Instead of an image, an icon can be passed.

<>
  <Avatar>
    <Avatar.Icon is={BatteryMedium} />
  </Avatar>
</>

Size

The available sizes for this component are: xs, sm, md, lg, xl and xxl. The default is lg.

<>
  <Avatar size="xs" name="Alice Smith">
    <Avatar.Image
      alt="Alice Smith's avatar"
      src="https://thispersondoesnotexist.com/image"
    />
  </Avatar>
  <Avatar size="sm" name="Alice Smith">
    <Avatar.Image
      alt="Alice Smith's avatar"
      src="https://thispersondoesnotexist.com/image"
    />
  </Avatar>
  <Avatar size="md" name="Alice Smith">
    <Avatar.Image
      alt="Alice Smith's avatar"
      src="https://thispersondoesnotexist.com/image"
    />
  </Avatar>
  <Avatar size="lg" name="Alice Smith">
    <Avatar.Image
      alt="Alice Smith's avatar"
      src="https://thispersondoesnotexist.com/image"
    />
  </Avatar>
  <Avatar size="xl" name="Alice Smith">
    <Avatar.Image
      alt="Alice Smith's avatar"
      src="https://thispersondoesnotexist.com/image"
    />
  </Avatar>
  <Avatar size="xxl" name="Alice Smith">
    <Avatar.Image
      alt="Alice Smith's avatar"
      src="https://thispersondoesnotexist.com/image"
    />
  </Avatar>
</>
<>
  <Avatar size="xs" name="Alice Smith">
    <Avatar.Image
      alt="Alice Smith's avatar"
      src="https://thispersondoesnotexist.com/image"
    />
  </Avatar>
  <Avatar size="sm" name="Alice Smith">
    <Avatar.Image
      alt="Alice Smith's avatar"
      src="https://thispersondoesnotexist.com/image"
    />
  </Avatar>
  <Avatar size="md" name="Alice Smith">
    <Avatar.Image
      alt="Alice Smith's avatar"
      src="https://thispersondoesnotexist.com/image"
    />
  </Avatar>
  <Avatar size="lg" name="Alice Smith">
    <Avatar.Image
      alt="Alice Smith's avatar"
      src="https://thispersondoesnotexist.com/image"
    />
  </Avatar>
  <Avatar size="xl" name="Alice Smith">
    <Avatar.Image
      alt="Alice Smith's avatar"
      src="https://thispersondoesnotexist.com/image"
    />
  </Avatar>
  <Avatar size="xxl" name="Alice Smith">
    <Avatar.Image
      alt="Alice Smith's avatar"
      src="https://thispersondoesnotexist.com/image"
    />
  </Avatar>
</>
Edit me!