Skip to content
Alpine Zag

Avatar

An avatar component is often used to display a user’s profile picture with a fallback text.

KT a cat
KT a cat
KT
Zag.js Reference 
---


---


<div x-cloak x-data class="flex gap-6">
  <div x-avatar>
    <span x-avatar:fallback>KT</span>
    <img
      x-avatar:image
      src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=128&h=128&dpr=2&q=80&auto=format&fit=crop"
      alt="a cat"
    />
  </div>


  <div x-avatar>
    <span x-avatar:fallback>KT</span>
    <img
      x-avatar:image
      src="https://images.unsplash.com/photo-1574158622682-e40e69881006?q=80&w=128&h=128&auto=format&fit=crop"
      alt="a cat"
    />
  </div>


  <div x-avatar>
    <span x-avatar:fallback>KT</span>
  </div>
</div>


<style>
  [data-part="root"] {
    @apply inline-flex justify-center items-center aspect-square w-12 h-12 bg-white dark:bg-zinc-800 border border-zinc-300/60 rounded-full overflow-hidden;
  }


  [data-part="fallback"] {
    @apply font-semibold text-sm;
  }


  [data-part="image"] {
    @apply w-12 h-12 object-cover rounded-full;
  }
</style>