Avatar

Overview

The Avatar component is used to represent users with images, initials, or icons. It's commonly used in user interfaces for profiles, comments, and user lists.

Features

• Multiple sizes (xs to xl)
• Image support with automatic fallback
• Fallback options: initials or custom icons
• Circular design by default
• Automatic image error handling
• Customizable appearance

Usage

Basic Avatar

The simplest way to use the avatar is with an image:

Fallback Options

Avatars can fallback to initials or icons when no image is available:

Sizes

Choose from five different sizes:

With Images

Examples of avatars with different image types:

Custom Icons

Use different icons as fallbacks:

Props

Slots

The Avatar component doesn't provide any slots as it's designed to be a self-contained component.

Best Practices

1. Image handling:
   • Use appropriately sized images to avoid unnecessary downloads
   • Provide meaningful alt text for accessibility
   • Always handle the fallback case
2. Size selection:
   • Use md size by default
   • Use larger sizes (lg, xl) for profile pages or hero sections
   • Use smaller sizes (xs, sm) for compact layouts or lists
3. Fallback content:
   • Use initials for personalized fallbacks
   • Use icons for generic or anonymous users
   • Keep custom text short (1-2 characters ideal)
4. Accessibility considerations:
   • Always provide descriptive alt text
   • Ensure sufficient color contrast for text fallbacks
   • Consider using aria-label for additional context
5. Performance tips:
   • Optimize avatar images
   • Use appropriate image formats (WebP when possible)
   • Consider lazy loading for lists of avatars