Avatar Component
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
Size
Type: AvatarSize |
Default: AvatarSize.Default
Controls the dimensions of the avatar. Options: Small (32px), Default (40px), Large (48px), ExtraLarge (64px).
Class
Type: string?
Additional CSS classes for the avatar container.
AvatarImage
Source
Type: string?
URL of the image to display. If loading fails, AvatarFallback will be shown.
Alt
Type: string?
Alternative text for the image (required for accessibility).
Class
Type: string?
Additional CSS classes for the image element.
AvatarFallback
Class
Type: string?
Additional CSS classes for the fallback container. Useful for custom background colors.