Avatar

Shows a user image, falling back to initials or an icon while it loads or if it fails.

AL

GH

<div class="flex items-center gap-4">
  <div data-controller="zag-avatar" data-part="root" class="relative h-12 w-12">
    <img
      data-part="image"
      src="https://i.pravatar.cc/96?img=5"
      alt="Ada Lovelace"
      class="h-full w-full rounded-full object-cover"
    />
    <span
      data-part="fallback"
      class="bg-primary/10 text-primary grid h-full w-full place-items-center rounded-full text-sm font-semibold"
      >AL</span
    >
  </div>

  <!-- Broken src → the fallback shows -->
  <div data-controller="zag-avatar" data-part="root" class="relative h-12 w-12">
    <img
      data-part="image"
      src="/does-not-exist.jpg"
      alt="Grace Hopper"
      class="h-full w-full rounded-full object-cover"
    />
    <span
      data-part="fallback"
      class="bg-muted text-muted-foreground grid h-full w-full place-items-center rounded-full text-sm font-semibold"
      >GH</span
    >
  </div>
</div>

Parts

root, image, fallback.

Events

Emits zag-avatar:status — detail is { status } ("loaded" or "error").