Overview of the Phoenix and LiveView Headless Avatar Component

The Mishka Chelekom Headless Avatar ships zero opinionated styling - only the semantic markup and a small engine that tracks the image's loading status ( data-status = idle/loading/loaded/error) on the root. The image is revealed only once it has loaded, and the fallback (e.g. initials) shows whenever the image is not loaded, after an optional delay so a fast-loading image never flashes the fallback. Both parts are addressable through a *_class attribute, so you style it entirely with your own Tailwind classes while the loading behavior keeps working underneath.

Base UI Avatar example (Phoenix headless)

RTL LTR

LT LT

<.avatar
  id="baseui-avatar-hero-1"
  src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
  width="48"
  height="48"
  delay={600}
  class="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-neutral-200 align-middle text-sm leading-none font-normal text-neutral-950 select-none dark:bg-neutral-800 dark:text-white"
  image_class="size-full object-cover"
  fallback_class="flex size-full items-center justify-center text-sm"
>
  LT
</.avatar>
<.avatar
  id="baseui-avatar-hero-2"
  class="inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-neutral-200 align-middle text-sm leading-none font-normal text-neutral-950 select-none dark:bg-neutral-800 dark:text-white"
  fallback_class="flex size-full items-center justify-center"
>
  LT
</.avatar>

Parts & data attributes

Each part carries a stable data-part and a structural chelekom-avatar__* class you can target, plus a status attribute on the root that drives the reveal / fallback behavior.

Accessibility

There is no formal WAI-ARIA APG pattern for avatars. Decorative images use an empty alt by default; pass a meaningful alt when the avatar conveys information (for example, a status not shown elsewhere on the page).