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.

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>
  );
}

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);
}

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.

id

A unique identifier for the component.

initials

Initials to display in the avatar.

onError

Invoked on load error of provided image.

onLoad

Invoked when load of provided image completes successfully.

size

Size of the avatar.

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.

Size