SaaS Avatar

User avatar with image and fallback

SaaSData Display

Overview

Avatar displays a user image with an automatic fallback to initials or placeholder when the image is unavailable. Built on Radix UI Avatar primitive with CVA size and shape variants.

Usage

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

<Avatar>
  <AvatarImage src="/avatar.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>;

Variants

Default

JD

Dark

JD

Fallback

AB

Small

SM

Large

LG

Square Shape

SQ

All Sizes

SMMDLG

Props

NameTypeDefaultRequiredDescription
asChildboolean—No
size"default" | "sm" | "lg" | null—No
shape"circle" | "square" | null—No