avatar
Image avatar with automatic image-load tracking and fallback.
Renders an avatar image, falling back to a provided element (initials, icon) when the image fails to load or is still loading.
Installation
pnpm add @fluixi/avatar
Usage
import { Avatar, AvatarImage, AvatarFallback } from '@fluixi/avatar';
<Avatar>
<AvatarImage src="/user.jpg" alt="Jane Doe" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>
Parts
| Part | Description |
|---|---|
Avatar |
Root container. |
AvatarImage |
The <img> element. Tracks load status and notifies via onLoadingStatusChange. |
AvatarFallback |
Shown while the image is loading or has errored; delayMs delays its appearance to avoid flashing on fast loads. |
AvatarFallback exposes data-status (idle | loading | loaded | error) on
AvatarImage so the skin can animate the transition.
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.