Avatar

An image element with a fallback for representing the user.

CNER

CNLRER

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn AvatarExample() -> impl IntoView {
    view! {
        <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>
    }
}

Basic

A basic avatar component with an image and a fallback.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn AvatarBasicExample() -> impl IntoView {
    view! {
        <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" class="grayscale" />
            <AvatarFallback>"CN"</AvatarFallback>
        </Avatar>
    }
}

Badge

Use the AvatarBadge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn AvatarBadgeExample() -> impl IntoView {
    view! {
        <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

You can also use an icon inside a badge.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn AvatarBadgeWithIconExample() -> impl IntoView {
    view! {
        <Avatar class="grayscale">
            <AvatarImage src="https://github.com/pranathip.png" alt="@pranathip" />
            <AvatarFallback>"PP"</AvatarFallback>
            <AvatarBadge>{icon!(icondata::LuPlus)}</AvatarBadge>
        </Avatar>
    }
}

Avatar Group

Use AvatarGroup to group avatars.

CNLRER

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn AvatarGroupExample() -> impl IntoView {
    view! {
        <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>
        </AvatarGroup>
    }
}

Avatar Group Count

Use AvatarGroupCount to add a count to the group.

CNLRER

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn AvatarGroupCountExample() -> impl IntoView {
    view! {
        <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

You can also use an icon inside .

CNLRER

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn AvatarGroupWithIconExample() -> impl IntoView {
    view! {
        <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>{icon!(icondata::LuPlus)}</AvatarGroupCount>
        </AvatarGroup>
    }
}

Sizes

Use the size prop to change the size of the avatar.

CNCNCN

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn AvatarSizesExample() -> impl IntoView {
    view! {
        <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

You can use an Avatar component as a trigger for a dropdown menu.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn AvatarDropdownExample() -> impl IntoView {
    view! {
        <DropdownMenu>
            <DropdownMenuTrigger>
                <Button variant="ghost" size="icon" class="rounded-full">
                    <Avatar>
                        <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
                        <AvatarFallback>"CN"</AvatarFallback>
                    </Avatar>
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent class="w-32">
                <DropdownMenuGroup>
                    <DropdownMenuItem>"Profile"</DropdownMenuItem>
                    <DropdownMenuItem>"Billing"</DropdownMenuItem>
                    <DropdownMenuItem>"Settings"</DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
                <DropdownMenuGroup>
                    <DropdownMenuItem variant="destructive">"Log out"</DropdownMenuItem>
                </DropdownMenuGroup>
            </DropdownMenuContent>
        </DropdownMenu>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::avatar::*;

#[component]
pub fn AvatarAnatomy() -> impl IntoView {
    view! {
        <Avatar>
            <AvatarImage />
            <AvatarFallback />
        </Avatar>
    }
}

API Reference

Avatar

Contains the contents of an avatar.

Custom Attributes
Name	Type	Default	Description
size	String	"default"	Set which size avatar to display. Accepted values: "sm" \| "default" \| "lg".

Implements global attributes.

AvatarBadge

Displays a badge overlay at the bottom right of an avatar.

Implements global attributes.

AvatarFallback

Renders a text fallback inside the avatar.

Implements global attributes.

AvatarGroup

Renders a group of Avatar components.

Implements global attributes.

AvatarGroupCount

Displays a count representing additional hidden avatars.

Implements global attributes.

AvatarImage

Renders an image inside the avatar.

Implements global and img attributes.

Getting Started

Components

Avatar

Basic

Badge

Badge with Icon

Avatar Group

Avatar Group Count

Avatar Group with Icon

Sizes

Dropdown

Anatomy

API Reference

Avatar

AvatarBadge

AvatarFallback

AvatarGroup

AvatarGroupCount

AvatarImage