Avatar
Displays a user's profile image with an automatic initials fallback. The initials background color is derived deterministically from the name, so the same person always gets the same color.
Preview
Sizes
IR
IR
IR
IR
IR
Status indicators
IR
AS
JL
ST
Initials color palette
A
BC
CD
DE
EF
Usage
jsx
import { Avatar } from '@/components/ui'
// With image
<Avatar class="text-sky-300">src="/photo.jpg" class="text-sky-300">name="Isabel Ramirez" class="text-sky-300">size="md" />
// Initials fallback (auto-generated)
<Avatar class="text-sky-300">name="Isabel Ramirez" class="text-sky-300">size="lg" />
// With status indicator
<Avatar class="text-sky-300">name="Isabel Ramirez" class="text-sky-300">status="online" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name* | string | — | Used for alt text and initials fallback. |
| src | string | — | Image URL. Falls back to initials if omitted or broken. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Controls width/height. |
| status | 'online' | 'offline' | 'busy' | 'away' | — | Colored dot indicator on the bottom-right. |