Avatar
Avatar
A Radix Avatar.Root + Avatar.Image + Avatar.Fallback — shows the image once it loads, the fallback (initials, an icon, ...) until then or if it fails. For a "just give me a name" avatar with automatic initials, see UserAvatar instead.
import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from "@pompeitech/vesuvius-ui";Default
Group
For an overlapping stack with automatic "+N" overflow, see AvatarGroup.
Sizes and shape
Broken image → fallback
AvatarImage renders nothing while loading or on error — AvatarFallback fills that gap automatically, no onError handling needed on your end:
API
Avatar
| Prop | Type | Default | Description |
|---|---|---|---|
shape | "circle" | "square" | "circle" | |
size | "sm" | "default" | "lg" | "xl" | "default" | sm=24px, default=32px, lg=40px, xl=56px. |
Plus every prop of Radix's Avatar.Root (which itself forwards every native <span> prop).
AvatarImage — every native <img> prop, including onLoadingStatusChange, called with "idle" | "loading" | "loaded" | "error" if you need to react to the load state yourself.
AvatarFallback
| Prop | Type | Default | Description |
|---|---|---|---|
delayMs | number | Wait this long before showing, to avoid a flash while a fast-loading image is still pending. |
Plus every native <span> prop.
Accessibility
AvatarImage's alt should be the person or entity's name, not a generic "avatar" — screen readers announce it exactly as a normal <img alt>. AvatarFallback's initials-only content (no alt of its own) means it should visually convey the same identity alt would have.