Avatar

Avatar displays a masked image when src is passed to it. It uses the image as a decorative element, assuming that its text description comes from adjacent elements. If there is no text content available and you need to make it accessible for screen readers, you can provide an aria-label attribute.

<Avatar
  src="/img/examples/avatar-3.png"
  attributes={{ "aria-label": "Paul Eastwood" }}
/>

When the image for the avatar is not available for display, you can use the initials text fallback.

<Avatar initials="RS" />

Another fallback option for the Avatar, when you don't have an image, is to use an icon. This approach can be used for displaying company logos or as a thumbnail for content sections.

<Avatar icon={ActivityIcon} />

Apply one of the color tokens as an Avatar background, which will be visible for initials and icon fallbacks. Faded colors can be applied by using the faded variant.

<View gap={3}>
  <View direction="row" gap={3}>
    <Avatar color="neutral" initials="RS" />
    <Avatar color="positive" initials="RS" />
    <Avatar color="warning" initials="RS" />
    <Avatar color="critical" initials="RS" />
    <Avatar color="primary" initials="RS" />
  </View>

  <View direction="row" gap={3}>
    <Avatar color="neutral" variant="faded" initials="RS" />
    <Avatar color="positive" variant="faded" initials="RS" />
    <Avatar color="warning" variant="faded" initials="RS" />
    <Avatar color="critical" variant="faded" initials="RS" />
    <Avatar color="primary" variant="faded" initials="RS" />
  </View>
</View>

Change the Avatar dimensions with the size property. It accepts any numeric value as a base unit token multiplier and automatically adjusts typography and icon sizes.

<View direction="row" gap={3}>
  <Avatar size={8} initials="RS" color="neutral" />
  <Avatar size={12} initials="RS" color="neutral" />
  <Avatar size={16} initials="RS" color="neutral" />
</View>

Use the squared property to change the Avatar shape.

<Avatar squared initials="RS" color="neutral" />

Avatar supports responsive syntax for the size property. Use object syntax to control its value based on the viewport size. Responsive properties are mobile-first, so selecting a value for a viewport will also apply it to all wider viewports.

<Avatar icon={ActivityIcon} size={{ s: 10, l: 20 }} />

• Avatar is a decorative image by default and changes to img role when alt property is passed