Avatar
An image element with a fallback for representing a user or entity.
Basic Usage
Display a user avatar with automatic fallback to initials.
SH
JDSize Variants
Avatars come in four different sizes.
With Images
Display actual user profile images with fallback support.
VC
MS
GGWith Icons
Use icons as fallback content for generic user representations.
User List
Common pattern for displaying a list of users or team members.
John Doe
john.doe@example.com
Alice Smith
alice.smith@example.com
Bob Johnson
bob.johnson@example.com
Avatar Group
Stack avatars to show multiple users or team members compactly.
Custom Styles
Customize avatar appearance with additional CSS classes.
With Status Indicator
Add status indicators to show online/offline/busy states.
Accessibility Notes
Best practices for accessible avatars.
✓ Alt text: Always provide descriptive alt text for AvatarImage that identifies the person or entity.
✓ Fallback content: Use meaningful initials or icons that help identify the user when images fail.
✓ Non-interactive: Avatars are purely presentational. If clickable, wrap in a button with proper ARIA label.
✓ Status indicators: If using status dots, consider adding aria-label to convey state to screen readers.
API Reference
Avatar component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Size | AvatarSize | Default | Controls dimensions: Small (32px), Default (40px), Large (48px), ExtraLarge (64px). |
| Class | string? | — | Additional CSS classes for the avatar container. |
AvatarImage Parameters
Parameters for the AvatarImage sub-component.
| Prop | Type | Default | Description |
|---|---|---|---|
| Source | string? | — | URL of the image. Falls back to AvatarFallback on load error. |
| Alt | string? | — | Alternative text for the image (required for accessibility). |
| Class | string? | — | Additional CSS classes for the image element. |
AvatarFallback Parameters
Parameters for the AvatarFallback sub-component.
| Prop | Type | Default | Description |
|---|---|---|---|
| Class | string? | — | Additional CSS classes. Useful for custom background colors. |