Avatar

Image with a lazy-loading fallback. Fallback renders automatically when src is empty or the image fails to load.

Features

Automatic fallback on image load error or missing src.

Fallback accepts any children (text, icons, etc.).

data-status tracks loading, loaded, and error states.

Lazy loading support.

Example

Anatomy


import { Avatar } from '@wire-ui/react'
 
<div>
<Avatar.Root>
<Avatar.Image src="https://i.pravatar.cc/150?img=3" alt="Jane Doe" />
<Avatar.Fallback>JD</Avatar.Fallback>
</Avatar.Root>
<Avatar.Root>
<Avatar.Fallback>AB</Avatar.Fallback>
</Avatar.Root>
<Avatar.Root>
<Avatar.Fallback>+9</Avatar.Fallback>
</Avatar.Root>
</div>

Styling

Avatar Image exposes data-status to track the image loading lifecycle. Fallback renders automatically when status is "error" or src is empty.


<Avatar.Root className="rounded-full overflow-hidden">
  <Avatar.Image className="
    size-full object-cover
    data-[status=loading]:opacity-0
    data-[status=loaded]:opacity-100
    transition-opacity
  " />
  <Avatar.Fallback className="text-sm font-medium">JD</Avatar.Fallback>
</Avatar.Root>

Using data attributes

Avatar.Image sets data-status with values "loading", "loaded", or "error".


/* Hide image while loading */
[data-status="loading"] { opacity: 0; }
[data-status="loaded"]  { opacity: 1; }
 
/* Fallback renders when status is "error" or src is empty */

Image data attributes

Attribute	Values
`data-status`	`"loading"` → `"loaded"` / `"error"`

Fallback renders when data-status is "error" or src is empty.