Avatar
Built on Base UI AvatarPrimitive. Used in AccountMenu (dashboard shell) for the Google-sourced profile photo, with initials/icon fallback when the image is missing or fails to load.
Sizes
Three sizes — sm (24px), default (32px), lg (40px).
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "default" | "lg" | "default" | Avatar diameter |
| className | string | — | Additional CSS classes to merge |
Image with fallback
AvatarImage renders first; AvatarFallback (initials or an icon) shows automatically if the image is absent or fails to load — never a broken-image icon.
Avatar Group
Overlapping stack for showing multiple participants, with a "+N" overflow count.
Status badge
Small indicator dot anchored to the bottom-right corner — reserved for a real status signal (e.g. online), not decoration.
Need a design system like this?
I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.
Product Designer | AI Design Engineer | Designer for Startups | Mobile & Complex SaaS | from Idea to Product | Framer Developer