# 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.

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

```

## AvatarProps

### AvatarProps

### alt

value: `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.

### id

value: `string`

A unique identifier for the component.

### initials

value: `string`

Initials to display in the avatar.

### onError

value: `() => void`

Invoked on load error of provided image.

### onLoad

value: `() => void`

Invoked when load of provided image completes successfully.

### size

value: `Extract<Size, 'base' | 'large' | 'extraLarge' | 'fill'>`

  - Size: 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'
Size of the avatar.

### src

value: `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.