Avatar

An easily stylable avatar component.

LTLT

import * as React from 'react';
import { Avatar } from '@base-ui-components/react/avatar';
import styles from './index.module.css';

export default function ExampleAvatar() {
  return (
    <div style={{ display: 'flex', gap: 20 }}>
      <Avatar.Root className={styles.Root}>
        <Avatar.Image
          src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
          width="48"
          height="48"
          className={styles.Image}
        />
        <Avatar.Fallback className={styles.Fallback}>LT</Avatar.Fallback>
      </Avatar.Root>
      <Avatar.Root className={styles.Root}>LT</Avatar.Root>
    </div>
  );
}

API reference

Import the component and assemble its parts:

Anatomy

import { Avatar } from '@base-ui-components/react/avatar';

<Avatar.Root>
  <Avatar.Image src="" />
  <Avatar.Fallback>LT</Avatar.Fallback>
</Avatar.Root>

Root

Displays a user's profile picture, initials, or fallback icon. Renders a <span> element.

Prop	Type	Default
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`

Image

The image to be displayed in the avatar. Renders an <img> element.

Prop	Type	Default
`onLoadingStatusChange`	`((status: ImageLoadingStatus) => void)`	`undefined`
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`

Fallback

Rendered when the image fails to load or when no image is provided. Renders a <span> element.

Prop	Type	Default
`delay`	`number`	`undefined`
`className`	`string \| ((state: State) => string)`	`undefined`
`render`	`\| ReactElement \| ((props: GenericHTMLProps, state: State) => ReactElement)`	`undefined`