Avatar
Markdown for agentsA user profile image component with fallback support and accessible image loading.
npx slipstream-ui@latest add avatarVariants
JD
With image
JD
Fallback only
AI
Custom size
Sizes
AIAI
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| Avatar | className | — | Additional CSS classes |
| AvatarImage | src, alt | — | Image URL and alt text |
| AvatarFallback | children, className | — | Fallback content and styling |
Accessibility
- AvatarImage requires alt text for accessibility
- AvatarFallback content is announced when image fails
- Radix Avatar handles image loading errors automatically
- Use meaningful alt text describing the person