Avatar
User representation component with image and initials fallback, supporting multiple sizes for various contexts
Avatar Sizes
All Size Variants
XS (24px)
SM (28px)
MD (40px)
LG (56px)
XL (80px)
Five size options from extra small (24px) to extra large (80px)
Avatar with Images
Profile Images
When image prop is provided, displays profile photo with fallback to initials
Image Error Fallback Demonstration
Note: When an image URL fails to load, the Avatar component automatically displays the user's initials instead.
These avatars demonstrate the fallback behavior without broken image URLs.
Demonstrates automatic fallback to initials when images are unavailable
Avatar with Initials
User Initials
Displays user initials with consistent background color and styling
Single Initial and Fallback
Handles single initials. When no image or initials are provided, nothing is rendered
Real-World Examples
Team Member List
John Doe
Product Manager
Alice Smith
UX Designer
Mike Johnson
Frontend Developer
Small avatars work well in lists and compact layouts
User Profile Header
John Doe
Senior Product Manager
San Francisco, CA
Extra large avatars for profile pages and detailed user information
Comment Thread
Great work on the latest design updates!
Thanks! The user feedback has been really positive.
This is an automated message from the system.
Extra small avatars for dense layouts. System messages without avatars have text flush to the left