GitHub New

Avatar

Previous Next

An image element with a fallback for representing the user.

@shadcn
@evilrabbit
@shadcn
@maxleiter
@evilrabbit
+3
<div class="flex flex-row flex-wrap items-center gap-6 md:gap-12">
    <Avatar>
        <AvatarImage Src="https://github.com/shadcn.png" Alt="@("@shadcn")" Class="grayscale" />
        <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar>
        <AvatarImage Src="https://github.com/evilrabbit.png" Alt="@("@evilrabbit")" />
        <AvatarFallback>ER</AvatarFallback>
        <AvatarBadge Class="bg-green-600 dark:bg-green-800" />
    </Avatar>
    <AvatarGroup Class="grayscale">
        <Avatar>
            <AvatarImage Src="https://github.com/shadcn.png" Alt="@("@shadcn")" />
            <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
            <AvatarImage Src="https://github.com/maxleiter.png" Alt="@("@maxleiter")" />
            <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
            <AvatarImage Src="https://github.com/evilrabbit.png" Alt="@("@evilrabbit")" />
            <AvatarFallback>ER</AvatarFallback>
        </Avatar>
        <AvatarGroupCount>+3</AvatarGroupCount>
    </AvatarGroup>
</div>

Installation

Install the avatar component using the command or manual steps.

blazor-shadcn add avatar

Usage

@using BlazorShadcn.Components.UI
<Avatar>
    <AvatarImage Src="https://github.com/shadcn.png" Alt="@("@shadcn")" />
    <AvatarFallback>CN</AvatarFallback>
</Avatar>

Examples

Basic

@shadcn 
<Avatar>
    <AvatarImage Src="https://github.com/shadcn.png" Alt="@("@shadcn")" />
    <AvatarFallback>CN</AvatarFallback>
</Avatar>

Badge

@shadcn 
<Avatar>
    <AvatarImage Src="https://github.com/shadcn.png" Alt="@("@shadcn")" />
    <AvatarFallback>CN</AvatarFallback>
    <AvatarBadge Class="bg-green-600 dark:bg-green-800" />
</Avatar>

Badge with Icon

@evilrabbit 
<Avatar>
    <AvatarImage Src="https://github.com/evilrabbit.png" Alt="@("@evilrabbit")" />
    <AvatarFallback>ER</AvatarFallback>
    <AvatarBadge Class="bg-green-600 dark:bg-green-800">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M9 12.75 11.25 15 15 9.75l1.5 1.5-5.25 5.25-3.75-3.75z" />
        </svg>
    </AvatarBadge>
</Avatar>

Avatar Group

@shadcn
@maxleiter
@evilrabbit
+3
<AvatarGroup Class="grayscale">
    <Avatar>
        <AvatarImage Src="https://github.com/shadcn.png" Alt="@("@shadcn")" />
        <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar>
        <AvatarImage Src="https://github.com/maxleiter.png" Alt="@("@maxleiter")" />
        <AvatarFallback>LR</AvatarFallback>
    </Avatar>
    <Avatar>
        <AvatarImage Src="https://github.com/evilrabbit.png" Alt="@("@evilrabbit")" />
        <AvatarFallback>ER</AvatarFallback>
    </Avatar>
    <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>

Avatar Group Count

@shadcn
@maxleiter
@evilrabbit
+3
<AvatarGroup Class="grayscale">
    <Avatar>
        <AvatarImage Src="https://github.com/shadcn.png" Alt="@("@shadcn")" />
        <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar>
        <AvatarImage Src="https://github.com/maxleiter.png" Alt="@("@maxleiter")" />
        <AvatarFallback>LR</AvatarFallback>
    </Avatar>
    <Avatar>
        <AvatarImage Src="https://github.com/evilrabbit.png" Alt="@("@evilrabbit")" />
        <AvatarFallback>ER</AvatarFallback>
    </Avatar>
    <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>

Avatar Group with Icon

@shadcn
@maxleiter
@evilrabbit
<AvatarGroup Class="grayscale">
    <Avatar>
        <AvatarImage Src="https://github.com/shadcn.png" Alt="@("@shadcn")" />
        <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar>
        <AvatarImage Src="https://github.com/maxleiter.png" Alt="@("@maxleiter")" />
        <AvatarFallback>LR</AvatarFallback>
    </Avatar>
    <Avatar>
        <AvatarImage Src="https://github.com/evilrabbit.png" Alt="@("@evilrabbit")" />
        <AvatarFallback>ER</AvatarFallback>
    </Avatar>
    <AvatarGroupCount>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M11.25 4.5a.75.75 0 0 1 1.5 0v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5z" />
        </svg>
    </AvatarGroupCount>
</AvatarGroup>

Sizes

@shadcn
@shadcn
@shadcn
<div class="flex flex-wrap items-center gap-2 grayscale">
    <Avatar Size="sm">
        <AvatarImage Src="https://github.com/shadcn.png" Alt="@("@shadcn")" />
        <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar>
        <AvatarImage Src="https://github.com/shadcn.png" Alt="@("@shadcn")" />
        <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar Size="lg">
        <AvatarImage Src="https://github.com/shadcn.png" Alt="@("@shadcn")" />
        <AvatarFallback>CN</AvatarFallback>
    </Avatar>
</div>

Dropdown

<div class="relative">
    <Button Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="rounded-full">
        <Avatar>
            <AvatarImage Src="https://github.com/shadcn.png" Alt="@("@shadcn")" />
            <AvatarFallback>CN</AvatarFallback>
        </Avatar>
    </Button>
    <!-- Render a popover-style menu panel with Profile, Billing, Settings, and Log out actions when open -->
</div>

API Reference

Avatar

The Avatar component is the root component that wraps the avatar image and fallback.

PropTypeDefault
Size"default" | "sm" | "lg""default"
Classstring-

AvatarImage

The AvatarImage component displays the avatar image.

PropTypeDefault
Srcstring-
Altstring-
Classstring-

AvatarFallback

The AvatarFallback component displays fallback content when the image fails to load.

PropTypeDefault
Classstring-

AvatarBadge

The AvatarBadge component displays a badge indicator on the avatar.

PropTypeDefault
Classstring-

AvatarGroup

The AvatarGroup component displays a group of overlapping avatars.

PropTypeDefault
Classstring-

AvatarGroupCount

The AvatarGroupCount component displays the count of additional avatars in a group.

PropTypeDefault
Classstring-

For more information, see the Radix UI documentation.