Skip to main content

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.

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 spacing="large500">
<Avatar alt="John Doe" />
<Avatar initials="EW" alt="Evan Williams" />
</InlineStack>
);
}

Preview

An example of the avatar with two variants: one with initials and the other with an icon.

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.
An example showing dos and don'ts of the Avatar component
Was this section helpful?