Data Display
Avatar
Radix-backed circular avatar with image and initials fallback.
A circular avatar built on Radix Avatar. Compose Avatar with AvatarImage and AvatarFallback: the image shows when it loads, and the fallback (e.g. initials) takes over while it loads or if it fails.
Import
import { Avatar, AvatarImage, AvatarFallback } from "@yuhuanowo/yunui";
Basic
Image with fallback
YH
Fallback only
When there is no image (or the URL is broken), only the fallback renders.
Initials fallback
AI
Sizes
The avatar is sized via className (it defaults to 40×40).
Custom sizes
SMLG
Parts
| Part | Description |
|---|---|
Avatar | Circular container; size it with className. Wraps the image and fallback. |
AvatarImage | The avatar image. Forwards src/alt; hidden automatically until it loads, and on load error. |
AvatarFallback | Placeholder (e.g. initials) shown while the image loads or when it is missing. Accepts delayMs to avoid a flash. |