Avatar

An image element with a fallback for representing the user.

Examples

Default

CN ER
CN LR ER 
<div class="flex flex-row flex-wrap items-center gap-12">
  <c-avatar>
    <c-avatar-image
      src="https://tapback.co/api/avatar/Felix.webp"
      alt="Felix"
    ></c-avatar-image>
    <c-avatar-fallback>CN</c-avatar-fallback>
  </c-avatar>
  <c-avatar avatar-classes="rounded-lg">
    <c-avatar-image
      src="https://tapback.co/api/avatar/Aneka.webp"
      alt="Aneka"
    ></c-avatar-image>
    <c-avatar-fallback>ER</c-avatar-fallback>
  </c-avatar>
  <div
    class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale"
  >
    <c-avatar>
      <c-avatar-image
        src="https://tapback.co/api/avatar/Felixa.webp"
        alt="Felixa"
      ></c-avatar-image>
      <c-avatar-fallback>CN</c-avatar-fallback>
    </c-avatar>
    <c-avatar>
      <c-avatar-image
        src="https://tapback.co/api/avatar/Bailey.webp"
        alt="Bailey"
      ></c-avatar-image>
      <c-avatar-fallback>LR</c-avatar-fallback>
    </c-avatar>
    <c-avatar>
      <c-avatar-image
        src="https://tapback.co/api/avatar/Anekar.webp"
        alt="Anekar"
      ></c-avatar-image>
      <c-avatar-fallback>ER</c-avatar-fallback>
    </c-avatar>
  </div>
</div>

API Reference

Avatar

Prop Type Default Description
avatar-classes string - Additional CSS classes for the element

AvatarImage

Prop Type Default Description
src string - Source URL for the image
alt string - Alternative text for the image
image-classes string - Additional CSS classes for the element

AvatarFallback

Prop Type Default Description
fallback-classes string - Additional CSS classes for the element