Avatar
mediaUser representation with image support, fallback to initials, and optional status indicator dot.
import { Avatar } from '@/components/forge'Preview
Avatar
JD
AK
FG
UI
Code Example
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
src | string | - | No | Image URL - shows fallback if undefined or fails |
alt | string | - | No | Alt text for the avatar image |
fallback | string | - | No | Initials or text shown when image is unavailable |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | No | Avatar diameter |
status | 'online' | 'away' | 'offline' | - | No | Shows a status indicator dot |
Variants
smmdlgxl
Accessibility
- Always provide alt text when using an image
- Status dot includes visually-hidden text for screen readers