Avatar
Display user profile images with automatic fallback to initials. Supports multiple sizes and RTL text direction for initials.
Preview
CN
Installation
Usage
Examples
With Fallback
CNJDAB
Different Sizes
CNCNCNCN
Avatar Group
CNVCAB+3
RTL Support Example
The Avatar component automatically adapts to RTL layouts. Avatar groups respect reading direction and overlapping order follows text direction.
LTR (English)
JD
John Doe
john@example.com
CNVCAB+5
RTL (العربية)
JD
John Doe
john@example.com
CNVCAB+5
Props
| Name | Type | Default | Description |
|---|---|---|---|
src | string | undefined | The image source URL |
alt | string | undefined | Alternative text for the image |
Accessibility
Image Alt Text
- Always provide descriptive alt text for avatar images
- Use user names or entity identifiers in alt text
- Fallback content is automatically accessible
ARIA Attributes
- Image has alt attribute for screen readers
- Fallback is rendered as text content
- Avatar is treated as decorative in most contexts
RTL Considerations
The Avatar component is fully RTL-compatible with proper layout handling.
- Avatar groups respect reading direction
- Overlapping order follows text direction in groups
- Fallback text displays correctly in all directions
- Image positioning remains centered