Avatar

Displays a user avatar with an image and an initials fallback.

<.avatar></.avatar>

Examples

With image

An avatar that loads an image with initials as fallback.

<.avatar>
  <.avatar_image id="demo-avatar-image" src="https://github.com/shadcn.png" alt="@shadcn" />
  <.avatar_fallback>CN</.avatar_fallback>
</.avatar>

Fallback only

When the image fails to load, the initials fallback is shown.

<div class="flex items-center gap-4">
  <.avatar>
    <.avatar_image id="demo-avatar-broken" src="https://example.com/does-not-exist.png" alt="Jane Doe" />
    <.avatar_fallback>JD</.avatar_fallback>
  </.avatar>
  <.avatar>
    <.avatar_image id="demo-avatar-no-src" alt="No Source" />
    <.avatar_fallback>NS</.avatar_fallback>
  </.avatar>
</div>

Show code

Props

Name	Type	Default	Values
class	:string
rest	:global
inner_block (slot)	:slot