Choose a version:

Avatar

Avatar component is used to show a thumbnail representation of an individual or business in the interface. It can be a graphical representation or visual depiction, such as an image, initials, or an icon.

Anchor to avatarpropsAvatarProps

Anchor to alt alt string: An alternative text description that describe the image for the reader to understand what it is about or identify the user the avatar belongs to.
Anchor to id id string: A unique identifier for the component.
Anchor to initials initials string: Initials to display in the avatar.
Anchor to onError onError () => void: Invoked on load error of provided image.
Anchor to onLoad onLoad () => void: Invoked when load of provided image completes successfully.
Anchor to size size Extract<, 'base' | 'large' | 'extraLarge' | 'fill'> Default: 'base': Size of the avatar.
Anchor to src src string: The URL or path to the image.

Initials will be rendered as a fallback if src is not provided, fails to load or does not load quickly.

AvatarProps

alt
An alternative text description that describe the image for the reader to understand what it is about or identify the user the avatar belongs to.
```
string
```
id
A unique identifier for the component.
```
string
```
initials
Initials to display in the avatar.
```
string
```
onError
Invoked on load error of provided image.
```
() => void
```
onLoad
Invoked when load of provided image completes successfully.
```
() => void
```

size

Size of the avatar.

Extract<Size, 'base' | 'large' | 'extraLarge' | 'fill'>

src
The URL or path to the image. Initials will be rendered as a fallback if `src` is not provided, fails to load or does not load quickly.
```
string
```

export interface AvatarProps extends IdProps {
  /**
   * Initials to display in the avatar.
   */
  initials?: string;

  /**
   * The URL or path to the image.
   *
   * Initials will be rendered as a fallback if `src` is not provided, fails to load or does not load quickly.
   */
  src?: string;

  /**
   * Invoked when load of provided image completes successfully.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
   */
  onLoad?(): void;

  /**
   * Invoked on load error of provided image.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
   */
  onError?(): void;

  /**
   * Size of the avatar.
   *
   * @default 'base'
   */
  size?: Extract<Size, 'base' | 'large' | 'extraLarge' | 'fill'>;

  /**
   * An alternative text description that describe the image for the reader
   * to understand what it is about or identify the user the avatar belongs to.
   */
  alt?: string;
}

Size

'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'

Was this section helpful?

Basic Avatar

import {

Avatar,

InlineStack,

reactExtension,

} from '@shopify/ui-extensions-react/customer-account';

import React from 'react';

export default reactExtension(

'customer-account.page.render',

() => <App />,

);

function App() {

return (

</InlineStack>

);

}

examples

Basic Avatar

React

import {
  Avatar,
  InlineStack,
  reactExtension,
} from '@shopify/ui-extensions-react/customer-account';
import React from 'react';

export default reactExtension(
  'customer-account.page.render',
  () => <App />,
);

function App() {
  return (
    <InlineStack spacing="large500">
      <Avatar alt="John Doe" />
      <Avatar initials="EW" alt="Evan Williams" />
    </InlineStack>
  );
}

JS

import {
  Avatar,
  InlineStack,
  extension,
} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root, api) => {
  renderApp(root, api);
});

async function renderApp(root, api) {
  const avatar = root.createComponent(Avatar, {
    alt: 'John Doe',
  });

  const avatarWithInitials = root.createComponent(Avatar, {
    initials: 'EW',
    alt: 'Evan Williams',
  });

  const inlineStack = root.createComponent(InlineStack, {spacing: 'large500'});
  inlineStack.append(avatar);
  inlineStack.append(avatarWithInitials);

  root.append(inlineStack);
}

Preview

Anchor to best-practicesBest Practices

By default, if a user does not provide their first or last name, the avatar component will display a placeholder icon. However, if at least one of the names is provided, the avatar will be replaced with one or two initials representing the user.
There are 4 sizes for the avatar component:
- Base (32x32 px): Use by default.
- Large (39×39 px): Use when the avatar is a focal point, such as a customer details card.
- Extra-large (47x47 px): Use when placing more emphasis on the avatar
- Fill to fit: Use when there is a particular size that does not match any of the three sizes provided. If using images please ensure the resolution meets the size requirements.
Provide alt text for avatars to assist customers using assistive technologies.

Dos

When using multiple avatars on the same page, maintain a consistent style and size to create a unified visual pattern for users.

Don'ts

Don't use different size avatars on the same page.

Was this section helpful?