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-ui/avatar
Usage
import { Avatar, AvatarImage, AvatarFallback } from '@fluixi-ui/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.
Avatar group
Cluster overlapping avatars with AvatarGroup, and cap the list with a trailing
+N chip via AvatarGroupOverflow. Overflow is a display concern — slice the
avatars you render yourself.
import { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupOverflow } from '@fluixi-ui/avatar';
<AvatarGroup>
<Avatar><AvatarImage src="/a.jpg" /><AvatarFallback>A</AvatarFallback></Avatar>
<Avatar><AvatarImage src="/b.jpg" /><AvatarFallback>B</AvatarFallback></Avatar>
<AvatarGroupOverflow>+4</AvatarGroupOverflow>
</AvatarGroup>
| Part | Description |
|---|---|
AvatarGroup |
Overlapping cluster. spacing (px, default 8) sets how far each avatar tucks under the previous. |
AvatarGroupOverflow |
Trailing +N chip, styled like an avatar. |
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.