Avatar
User image with automatic initials fallback, wrapping Radix Avatar.
Avatar wraps @radix-ui/react-avatar. When the image fails to load (or
hasn't yet), the fallback renders initials derived from name — Radix
handles the timing via onLoadingStatusChange, so initials appear
immediately on failure.
Installation
import { Avatar, AvatarImage, AvatarFallback } from "@iammikz/srui";
Usage
JD
(The image above intentionally 404s — that's the fallback doing its job.)
Props
| Export | Notes |
|---|---|
Avatar | Root; size/shape via className |
AvatarImage | Radix Image: src, alt, onLoadingStatusChange |
AvatarFallback | Adds name?: string — renders initials when no children given |
Examples
Sizes
ALALAL
Custom fallback content
Accessibility
AvatarImage takes a real alt; when the fallback is showing, the
container is decorative (initials are readable text). Announce loading
failures to users only if the avatar carries unique information.