Avatar

Use the Avatar component to represent users or entities visually in your application. It's ideal for profile pictures, user lists, comment sections, and team member displays.

The component automatically handles image loading failures by displaying a fallback, ensuring a consistent user experience even when images fail to load.

• Always provide meaningful fallback text (usually initials) for accessibility and when images fail to load.
• Use appropriate sizes for different contexts: small for compact lists, large for profile pages.
• When using AvatarGroup, limit the number of visible avatars (3-5) to maintain clarity and show a count for additional members.
• Include alt text for images to improve accessibility and SEO.
• Consider adding status indicators (online/offline/busy) for real-time communication interfaces.

The Avatar component is built on top of Radix UI's Avatar primitive, ensuring robust accessibility features:

• Automatically handles image loading states and fallback rendering.
• Always provide descriptive alt attributes for images to assist screen reader users.
• Fallback text should be meaningful and concise (typically 1-3 characters).
• The component maintains proper semantic structure and supports keyboard navigation when interactive.

Sizes

The Avatar component supports four size variants: sm, md, lg, and xl. Choose the appropriate size based on your layout and use case.

AvatarGroup

Use AvatarGroup to display multiple avatars in an overlapping stack. It automatically handles overflow by showing a count badge for additional members beyond the max limit.

Custom Styles

Customize the appearance using className props on Avatar, AvatarImage, or AvatarFallback. You can modify borders, background colors, border radius, and more.