Avatar

An image element with a fallback for representing the user.

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

#[component]
pub fn AvatarExample() -> impl IntoView {
    view! {
        <Avatar class="size-12">
            <AvatarImage alt="@adoyle0" src="/avatar.jpg" />
            <AvatarFallback>"AD"</AvatarFallback>
        </Avatar>
    }
}

Fallback

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

#[component]
pub fn AvatarFallbackExample() -> impl IntoView {
    view! {
        <Avatar class="size-12">
            <AvatarFallback>"AD"</AvatarFallback>
        </Avatar>
    }
}

Avatar Group

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

#[component]
pub fn AvatarGroupExample() -> impl IntoView {
    view! {
        <AvatarGroup>
            <Avatar class="size-12 grayscale">
                <AvatarImage src="/avatar-1.png" alt="Sofia Davis's Avatar" />
                <AvatarFallback>"SD"</AvatarFallback>
            </Avatar>
            <Avatar class="size-12 grayscale">
                <AvatarImage src="/avatar-2.png" alt="Jackson Lee's Avatar" />
                <AvatarFallback>"JL"</AvatarFallback>
            </Avatar>
            <Avatar class="size-12 grayscale">
                <AvatarImage src="/avatar-3.png" alt="Isabella Nguyen's Avatar" />
                <AvatarFallback>"IN"</AvatarFallback>
            </Avatar>
        </AvatarGroup>
    }
}

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.

Implements global attributes.

AvatarFallback

Renders a text fallback inside the avatar.

Implements global attributes.

AvatarGroup

Renders a group of Avatar components.

Implements global attributes.

AvatarImage

Renders an image inside the avatar.

Implements global and img attributes.