Avatar

Overview

A compound component built on Radix UI's Avatar primitive. Supports three sizes, a status badge overlay, and a group variant for stacking multiple avatars.

Usage

import { Avatar, AvatarImage, AvatarFallback } from "@leanicon/web-builder-library";

<Avatar size="default">
  <AvatarImage src="/user.jpg" alt="Jane Doe" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>;

Variants

Sizes: "sm" (24px), "default" (32px), "lg" (40px).

With status badge:

Group stacking:

Notes

• AvatarBadge size scales automatically with the parent Avatar size via data-size attribute.
• AvatarGroup adds a negative spacing (-space-x-2) and ring border between stacked avatars.
• Dark mode is handled via semantic tokens.