Avatar
User avatar with image loading, fallback text generation, status indicators, and shape variants
Basic Avatars
Legacy pattern using simple props for quick implementation.
Legacy Pattern (Simple Props)
Compound Avatars
Compound component pattern for maximum flexibility and control.
Compound Component Pattern
Avatar Groups
Group multiple avatars together with simple or compound patterns.
Avatar Group
Avatar Group Compound
Sizes & Shapes
Control the visual hierarchy with size and shape variations.
Circle
Rounded
Square
Status & Presence
Combine avatars with subtle status indicators using badges.
Online
Shown with a green presence dot.
Busy
Use color to represent different states.
Fallback & Initials
Show initials or a placeholder when the image is missing.
Initials
Generic user
Broken URL
Interactive Examples
Use avatars in cards, with labels, and interactive behaviors.
Jane Doe
ProProduct Designer • Remote
Usage Guidelines
When to Use
- User profiles
- Contact lists
- Comment authors
Accessibility
- Alt text describes the person
- Decorative avatars use aria-hidden
Performance
- Lazy image loading
- Efficient fallback
Common Mistakes
- No fallback for failed images
- Missing alt text
Frequently Asked Questions
Related Components
View allCollapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Status indicator with variant system, dot mode, positioning, and pulsing animation support
Container component with header, body, footer composition, variant system including glass morphism effects