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

Anatomy

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>

API reference

Root

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

className

string | function

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Avatar.Root.State) => string)

render

ReactElement | function

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | ((props: HTMLProps, state: Avatar.Root.State) => ReactElement)

Image

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

onLoadingStatusChange

function

Name: onLoadingStatusChange
Description: Callback fired when the loading status changes.
Type: ((status: ImageLoadingStatus) => void)

className

string | function

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Avatar.Root.State) => string)

render

ReactElement | function

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | ((props: HTMLProps, state: Avatar.Root.State) => ReactElement)

Fallback

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

delay

number

Name: delay
Description: How long to wait before showing the fallback. Specified in milliseconds.
Type: number

className

string | function

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Avatar.Root.State) => string)

render

ReactElement | function

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | ((props: HTMLProps, state: Avatar.Root.State) => ReactElement)