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 propertiesProperties

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 element.
Anchor to initials initials string: Initials to display in the avatar.
Anchor to size size 'small' | 'large' | 'base' | 'small-200' | 'large-200' 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.

AvatarElementPropsDocs

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 element.
```
string
```
initials
Initials to display in the avatar.
```
string
```

size

Size of the avatar.

'small' | 'large' | 'base' | 'small-200' | 'large-200'

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
```

AvatarElementProps

Was this section helpful?

Anchor to eventsEvents

Learn more about registering events.

Anchor to error error ((event: <typeof tagName>) => void) | null: Callback when the image fails to load.
Anchor to load load ((event: <typeof tagName>) => void) | null: Callback when the image loads successfully.

AvatarEventsDocs

error

Callback when the image fails to load.

((event: CallbackEventListener<typeof tagName>) => void) | null

load

Callback when the image loads successfully.

((event: CallbackEventListener<typeof tagName>) => void) | null

AvatarEvents

CallbackEventListener

(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): void;
    }) | null

CallbackEvent

TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}

Was this section helpful?

Basic Avatar

Preact

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

function Extension() {

return <s-avatar initials="EW" alt="Evan White" size="base" />;

}

examples

Basic Avatar

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default async () => {
  render(<Extension />, document.body);
};

function Extension() {
  return <s-avatar initials="EW" alt="Evan White" size="base" />;
}

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 5 sizes for the avatar component:
  - small-200 (21x21 px): Use when showing avatars in tables / lists where space is limited.
  - small (26x26 px): Use when you want to conserve space but want a larger size than small-200.
  - base (32x32 px): Use by default.
  - large (39×39 px): Use when the avatar is a focal point, such as a customer details card.
  - large-200 (47x47 px): Use when placing more emphasis on the avatar.
- 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?