Avatar
User avatar with fallback initials and status indicator. Displays an image when available, falling back to initials with an optional presence status dot.
Sizes
Preview
A
B
C
D
Status Indicators
Preview
A
B
C
D
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | - | Image source URL. |
| alt | string | - | Image alt text. |
| fallback | string | - | Fallback initials when no image is available. |
| size | "sm" | "md" | "lg" | "xl" | "md" | Avatar size. |
| status | "online" | "busy" | "away" | "offline" | - | Status indicator displayed on the avatar. |
| className | string | - | Additional CSS classes. |
Accessibility
- Renders an
<img>element whensrcis provided, withalttext for screen readers - Fallback initials are wrapped in an
aria-labelso the user identity is still announced - Status indicator uses
aria-labelto convey presence state (e.g. "online", "busy") to assistive technology - Passes through all standard HTML attributes including
aria-*androle