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:

<template>
  <MAvatar src="https://avatars.githubusercontent.com/u/71938701?v=4" />
</template>

Fallback Options

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

<template>
  <div class="flex items-center gap-4">
    <MAvatar alt="John Doe" />
    <MAvatar icon="i-lucide-user" />
    <MAvatar text="JD" />
  </div>
</template>

Sizes

Choose from five different sizes:

<template>
  <div class="flex items-center gap-4">
    <MAvatar size="xs" alt="XS" />
    <MAvatar size="sm" alt="SM" />
    <MAvatar size="md" alt="MD" />
    <MAvatar size="lg" alt="LG" />
    <MAvatar size="xl" alt="XL" />
  </div>
</template>

With Images

Examples of avatars with different image types:

<template>
  <div class="flex items-center gap-4">
    <MAvatar
      src="https://avatars.githubusercontent.com/u/71938701?v=4"
      alt="User 1"
    />
    <MAvatar
      src="https://avatars.githubusercontent.com/u/72015679?v=4"
      alt="User 2"
    />
    <MAvatar
      src="/broken-image.jpg"
      alt="Fallback Example"
    />
  </div>
</template>

Custom Icons

Use different icons as fallbacks:

<template>
  <div class="flex items-center gap-4">
    <MAvatar icon="i-lucide-user" />
    <MAvatar icon="i-lucide-users" />
    <MAvatar icon="i-lucide-user-circle" />
  </div>
</template>

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