Avatar

Displays image avatars with text fallback for missing or loading images.

Installation

Add the Avatar component using the CLI:

shadcnblazor component add avatar

Usage

The Avatar component displays user avatars. Use Src for an image URL, or ChildContent for a text fallback when the image is missing or loading. Set Size for Sm, Md, or Lg.

<Avatar Src="https://github.com/shadcn.png" Alt="shadcn" />

Examples

Fallback

When Src is not set or the image fails to load, the Avatar shows ChildContent or initials derived from Alt.

<div class="flex gap-4">
    <Avatar>AB</Avatar>
    <Avatar Alt="John Doe">JD</Avatar>
</div>

Badge

Use the AvatarBadge component via the Badge parameter to add a status indicator at the bottom right of the avatar. Use the Class parameter to customize colors (e.g. bg-green-600 dark:bg-green-800).

<Avatar Src="https://github.com/shadcn.png" Alt="shadcn" Badge="@BadgeContent" />

@code {
    private static RenderFragment BadgeContent => __builder =>
    {
        <AvatarBadge Class="bg-green-600 dark:bg-green-800" />
    };
}

Sizes

Use the Size parameter to change the size of the avatar: Size.Sm, Size.Md, or Size.Lg.

<div class="flex items-center gap-4">
    <Avatar Src="https://github.com/shadcn.png" Alt="shadcn" Size="@Size.Sm" />
    <Avatar Src="https://github.com/shadcn.png" Alt="shadcn" Size="@Size.Md" />
    <Avatar Src="https://github.com/shadcn.png" Alt="shadcn" Size="@Size.Lg" />
</div>

Avatar Group

Use the AvatarGroup component to display multiple avatars with overlapping styling. Set Size to match your avatars and use Class for additional styling (e.g. grayscale).

<AvatarGroup Size="@Size.Md" Class="grayscale">
    <Avatar Src="https://github.com/shadcn.png" Alt="shadcn" />
    <Avatar Src="https://i.pravatar.cc/64?img=11" Alt="User 1" />
    <Avatar Src="https://i.pravatar.cc/64?img=12" Alt="User 2" />
</AvatarGroup>

Dropdown

You can use the Avatar component as a trigger for a dropdown menu. Wrap it in DropdownMenuTrigger with AsChild="true" and add DropdownMenuContent for the menu items.

<DropdownMenu>
    <DropdownMenuTrigger AsChild="true">
        <Avatar Src="https://github.com/shadcn.png" Alt="shadcn" Class="cursor-pointer" />
    </DropdownMenuTrigger>
    <DropdownMenuContent>
        <DropdownMenuGroup>
            <DropdownMenuLabel>My Account</DropdownMenuLabel>
            <DropdownMenuItem>Profile</DropdownMenuItem>
            <DropdownMenuItem>Billing</DropdownMenuItem>
            <DropdownMenuItem>Settings</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Log out</DropdownMenuItem>
    </DropdownMenuContent>
</DropdownMenu>

API Reference

Avatar

Displays a user avatar with optional image, fallback initials, and status badge.

Properties

Name	Type	Description
`AdditionalAttributes`	`Dictionary<string, Object>`
`Alt`	`string`	Alt text for the image; used to generate fallback initials when the image fails to load.
`Badge`	`RenderFragment`	Optional badge overlay, typically an .
`ChildContent`	`RenderFragment`	Content rendered when no image is shown (e.g. initials or custom fallback).
`Class`	`string`
`Size`	`Size`	The size of the avatar.
`Src`	`string`	The URL of the avatar image.

Methods

Method	Returns	Description
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.