User profile image with fallback initials and size control via the AvatarSize enum.

Overview

The Avatar component displays a user profile image or fallback initials in a circular container. It uses the AvatarSize enum for sizing and Shell.Cn() for class merging.

Installation

shellui add avatar

Usage

With Image

<Avatar Src="/avatar.jpg" Alt="User avatar" />

With Fallback Initials

When no image is provided, or the image fails to load, the Fallback text is displayed:

<Avatar Fallback="JD" />

Image with Fallback

<Avatar Src="@user.AvatarUrl" Alt="@user.Name" Fallback="@GetInitials(user.Name)" />

@code {
    private string GetInitials(string name)
    {
        var parts = name.Split(' ');
        if (parts.Length >= 2)
            return $"{parts[0][0]}{parts[1][0]}";
        return name.Length > 0 ? name[0].ToString() : "";
    }
}

Sizes

The Size parameter accepts an AvatarSize enum value:

<div class="flex items-center gap-4">
  <Avatar Size="AvatarSize.Sm" Fallback="SM" />
  <Avatar Size="AvatarSize.Default" Fallback="MD" />
  <Avatar Size="AvatarSize.Lg" Fallback="LG" />
</div>

<div class="flex items-center space-x-4">
  <Avatar Src="@user.AvatarUrl"
          Alt="@user.Name"
          Fallback="@GetInitials(user.Name)"
          Size="AvatarSize.Lg" />
  <div>
    <h3 class="font-medium">@user.Name</h3>
    <p class="text-sm text-muted-foreground">@user.Email</p>
  </div>
</div>

Custom Styling

<Avatar Fallback="AB" Class="ring-2 ring-primary" />

API Reference

Parameter	Type	Default	Description
`Src`	`string?`	`null`	Image source URL
`Alt`	`string?`	`null`	Image alt text
`Fallback`	`string?`	`null`	Fallback text shown when no image loads
`Size`	`AvatarSize`	`AvatarSize.Default`	Avatar size
`Class`	`string?`	`null`	Additional CSS classes merged via `Shell.Cn()`

AvatarSize Enum

Value	Description
`Default`	Standard size (40 px)
`Sm`	Small (32 px)
`Lg`	Large (48 px)

Accessibility

The <img> element receives the Alt text for screen readers.
When only Fallback is shown, aria-label conveys the initials.
Decorative avatars can set Alt="" to be hidden from assistive technology.

Avatar