Actions and status
Avatar
Render a profile image or initials fallback with consistent sizing, shape, and optional status treatment.
Curated demo
SR
Reference
Render a profile image or initials fallback with consistent sizing, shape, and optional status treatment.
- Use Avatar for compact identity, not for arbitrary decorative circles.
- Provide a real alt value for meaningful images; name-based fallbacks announce the person or team.
- Status dots are decorative by default, so pair them with nearby visible text when status matters.
Props
| Name | Type | Default | Description |
|---|---|---|---|
src | string | — | Optional image source. |
alt | string | — | Image alt text when src is provided. |
name | string | — | Name used for fallback initials and accessible labelling. |
initials | string | — | Explicit initials fallback. |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Avatar size. |
shape | 'circle' | 'rounded' | 'square' | 'circle' | Avatar shape. |
status | 'online' | 'busy' | 'away' | 'offline' | — | Optional decorative status indicator. |
class | string | — | Additional CSS classes. |
Example snippet
<Avatar name="Mattriley Tools" status="online" />