Avatar

Avatars are used to show a thumbnail representation of an individual or business in the interface.

Use to present an avatar for a merchant, customer, or business.

import {Avatar} from '@shopify/polaris';
import React from 'react';

function AvatarExample() {
  return <Avatar customer name="Farrah" />;
}

Use to present an avatar in a condensed layout, such as a data table cell or an action list item.

import {Button, Popover, ActionList, Avatar} from '@shopify/polaris';
import {useState, useCallback} from 'react';

function ExtraSmallAvatarExample() {
  const [active, setActive] = useState(true);
  const toggleActive = useCallback(() => setActive((active) => !active), []);
  const activator = (
    <Button onClick={toggleActive} disclosure>
      Manage staff
    </Button>
  );

  return (
    <div style={{height: '250px'}}>
      <Popover active={active} activator={activator} onClose={toggleActive}>
        <ActionList
          items={[
            {
              content: 'Chet Baker',
              prefix: <Avatar customer size="extraSmall" name="Chet Baker" />,
            },
            {
              content: 'Farrah Fawcett',
              prefix: (
                <Avatar customer size="extraSmall" name="Farrah Fawcett" />
              ),
            },
          ]}
        />
      </Popover>
    </div>
  );
}

Use a square shape when the avatar represents a non-person entity like an app, channel, or store.

import {Avatar} from '@shopify/polaris';
import React from 'react';

function AvatarExample() {
  return <Avatar name="Shop One" shape="square" />;
}

Props

Want to help make this feature better? Please share your feedback.

interface AvatarProps

size?'extraSmall' | 'small' | 'medium' | 'large': Size of avatar.
Defaults to 'medium'.
shape?'square' | 'round': Shape of avatar.
Defaults to 'round'.
name?string: The name of the person.
initials?string: Initials of person to display.
customer?boolean: Whether the avatar is for a customer.
source?string: URL of the avatar image which falls back to initials if the image fails to load.
onError?() => void: Callback fired when the image fails to load.
accessibilityLabel?string: Accessible label for the avatar image.

Best practices

Avatars should be one of 4 sizes:

Extra small (24 x 24 px): use in tightly condensed layouts
Small (32 × 32 px): use when the medium size is too big for the layout, or when the avatar has less importance
Medium (40 × 40 px): use as the default size
Large (60 × 60 px): use when an avatar is a focal point, such as on a single customer card

Content guidelines

Any time you use an image to communicate a concept on Shopify, it’s important to use descriptive alt text. Doing this is important for accessibility because it allows screen readers to describe what’s in the image to people who may not be able to see it.

For avatars, we recommend using a format that describes what will show in the image:

alt="Person’s name" if the avatar represents a person
alt="Business’s name" if the avatar represents a business
alt="" if the name of the person/business appears next to the avatar as text

To show a thumbnail for an object rather than a person or business, use the thumbnail component

Accessibility

Structure

The avatar component uses a generated scalable vector graphics (SVG) file, which can cause challenges for merchants that use assistive technologies. To create a standard experience, the <img> is hidden from assistive technologies by using an empty alt attribute, and replaced with a <span> that has role=”img”.

Labeling

The avatar component represents content, and should have a text equivalent for merchants using assistive technologies. By default, the value of the name prop is used for the alternative text. If different text would be more accurate, use the accessibilityLabel prop to replace the value provided by name.