Avatar

An easily stylable avatar component.

import { Avatar } from '@base-ui/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 delay={600} 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/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.

classNamestring | 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 | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Avatar.Root.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | 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) | undefined

Avatar.Root.PropsHide

Re-Export of Root props as AvatarRootProps

Avatar.Root.StateHide

type AvatarRootState = {
  /** The image loading status. */
  imageLoadingStatus: ImageLoadingStatus;
}

Image

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

onLoadingStatusChangefunction—

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

classNamestring | 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.Image.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Avatar.Image.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | 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.Image.State, ) => ReactElement) | undefined

data-starting-style

Present when the image is animating in.

data-ending-style

Present when the image is animating out.

Attribute	Description	-
`data-starting-style`	Present when the image is animating in.
`data-ending-style`	Present when the image is animating out.

Avatar.Image.PropsHide

Re-Export of Image props as AvatarImageProps

Avatar.Image.StateHide

type AvatarImageState = {
  /** The transition status of the component. */
  transitionStatus: TransitionStatus;
  /** The image loading status. */
  imageLoadingStatus: ImageLoadingStatus;
}

Fallback

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

delaynumber—

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

classNamestring | 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.Fallback.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Avatar.Fallback.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | 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.Fallback.State, ) => ReactElement) | undefined

Avatar.Fallback.PropsHide

Re-Export of Fallback props as AvatarFallbackProps

Avatar.Fallback.StateHide

type AvatarFallbackState = {
  /** The image loading status. */
  imageLoadingStatus: ImageLoadingStatus;
}