Skip to content
comp0

comp0

Actions

Avatar

An image that keeps a graceful stand-in while it loads or fails.

When to use it: Use it for profile pictures and other images that may be slow or missing.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Loading example…
Avatar.tsxtsx
import { Avatar, AvatarFallback, AvatarImage } from "@comp0/react";

const portrait =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%230f766e'/%3E%3Ccircle cx='20' cy='15' r='7' fill='%23f4f4f5'/%3E%3Cpath d='M6 40a14 12 0 0 1 28 0z' fill='%23f4f4f5'/%3E%3C/svg%3E";

export function Example() {
  return (
    <div className="flex items-center gap-4">
      <Avatar className="flex size-12 items-center justify-center overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800">
        <AvatarImage
          src={portrait}
          alt="Illustrated portrait of Ada Lovelace"
          className="size-full object-cover"
        />
        <AvatarFallback className="text-base font-medium text-zinc-600 sm:text-sm dark:text-zinc-300">
          AL
        </AvatarFallback>
      </Avatar>
      <Avatar className="flex size-12 items-center justify-center overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800">
        <AvatarImage src="data:," alt="Ada Kaplan" className="size-full object-cover" />
        <AvatarFallback className="text-base font-medium text-zinc-600 sm:text-sm dark:text-zinc-300">
          AK
        </AvatarFallback>
      </Avatar>
    </div>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. Avatar

    Span that tracks the image status and exposes it as data attributes. Owns a DOM element.

  2. AvatarImage

    Native img, hidden until a load succeeds. Owns a DOM element.

  3. AvatarFallback

    Stand-in such as initials or an icon, hidden once the image loads. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Wrap Avatar around one AvatarImage and one AvatarFallback.

  2. 2

    Add the supporting parts

    Give AvatarImage a src and an alt that names the person; put initials or an icon in AvatarFallback.

  3. 3

    Make the behavior clear

    Style the settled states through [data-loaded] and [data-error] on Avatar.

    Exampletsx
    <Avatar>
  <AvatarImage src={photoUrl} alt="Ada Kaplan" />
  <AvatarFallback>AK</AvatarFallback>
</Avatar>;

Keyboard

Forms and accessibility

No form behavior; an avatar only displays an image.

Accessibility checklist

  • Give AvatarImage an alt that names the person or entity; use alt="" only when adjacent text already names them.
  • Keep the fallback recognizable: initials or an icon, not an empty box.
  • The image stays hidden until it loads, so a broken-image glyph is never announced or shown.

API reference

Importtsx
import { Avatar, AvatarFallback, AvatarImage } from "@comp0/react";

Avatar

DOM element

Span that tracks the image status and exposes it as data attributes.

PropTypeDescription
childrenReactNodeOne AvatarImage and one AvatarFallback, in either order.

AvatarImage

DOM element

Native img, hidden until a load succeeds.

PropTypeDescription
srcstringImage source; a data: URI works for inline artwork.
altstringNames the person or entity; "" only when adjacent text already does.
onLoad(event: SyntheticEvent) => voidRun before the avatar reacts; preventDefault keeps the status unchanged.
onError(event: SyntheticEvent) => voidRun before the avatar reacts; preventDefault keeps the status unchanged.

AvatarFallback

DOM element

Stand-in such as initials or an icon, hidden once the image loads.

PropTypeDescription
childrenReactNodeThe initials or icon to show while there is no image.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

Avatar

Style hookMeaning
[data-loaded]The image loaded; the fallback is hidden.
[data-error]The image failed to load; the fallback stays visible.

Keep exploring