Avatar

Profile picture, user initials or fallback icon.

use radix_yew_themes::{Avatar, Flex};
use yew::prelude::*;

#[function_component]
pub fn AvatarExample() -> Html {
    html! {
        <Flex gap=2>
            <Avatar
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar fallback="A" />
        </Flex>
    }
}

API Reference

This component inherits props from the Avatar primitive.

PropTypeDefault
as_childOption<Callback<AvatarChildProps>>-
sizeResponsive<1..9>3
variantAvatarVariantAvatarVariant::Soft
colorOption<AccentColor>-
high_contrastOption<bool>-
radiusOption<Radius>-
fallbackHtml-

Examples

Size

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

use radix_yew_themes::{Avatar, Flex, FlexAlign};
use yew::prelude::*;

#[function_component]
pub fn AvatarSizeExample() -> Html {
    html! {
        <Flex align={FlexAlign::Center} gap=4>
            <Avatar
                size=1
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=2
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=3
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=4
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=5
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=6
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=7
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=8
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
            <Avatar
                size=9
                src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
                fallback="A"
            />
        </Flex>
    }
}

Variant

Use the variant prop to control the visual style of the avatar.

use radix_yew_themes::{Avatar, AvatarVariant, Flex};
use yew::prelude::*;

#[function_component]
pub fn AvatarVariantExample() -> Html {
    html! {
        <Flex gap=2>
            <Avatar variant={AvatarVariant::Solid} fallback="A" />
            <Avatar variant={AvatarVariant::Soft} fallback="A" />
        </Flex>
    }
}

Color

Use the color prop to assign a specific color.

use radix_yew_themes::{AccentColor, Avatar, AvatarVariant, Flex};
use yew::prelude::*;

#[function_component]
pub fn AvatarColorExample() -> Html {
    html! {
        <Flex gap=2>
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Indigo} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Cyan} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Orange} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Crimson} fallback="A" />
        </Flex>
    }
}

High-Contrast

Use the high_contrast prop to increase color contrast with the background.

use radix_yew_themes::{AccentColor, Avatar, AvatarVariant, Grid, GridDisplay, GridFlow};
use yew::prelude::*;

#[function_component]
pub fn AvatarHighContrastExample() -> Html {
    html! {
        <Grid rows=2 gap=2 display={GridDisplay::InlineGrid} flow={GridFlow::Column}>
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Indigo} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Indigo} fallback="A" high_contrast=true />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Cyan} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Cyan} fallback="A" high_contrast=true />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Orange} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Orange} fallback="A" high_contrast=true />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Crimson} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Crimson} fallback="A" high_contrast=true />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Gray} fallback="A" />
            <Avatar variant={AvatarVariant::Solid} color={AccentColor::Gray} fallback="A" high_contrast=true />
        </Grid>
    }
}

Radius

Use the radius prop to assign a specific radius value.

use radix_yew_themes::{Avatar, Flex, Radius};
use yew::prelude::*;

#[function_component]
pub fn AvatarRadiusExample() -> Html {
    html! {
        <Flex gap=2>
            <Avatar radius={Radius::None} fallback="A" />
            <Avatar radius={Radius::Large} fallback="A" />
            <Avatar radius={Radius::Full} fallback="A" />
        </Flex>
    }
}

Fallback

Use the fallback prop to modify the rendered fallback element.

use radix_yew_themes::{Avatar, Box, Flex};
use yew::prelude::*;

#[function_component]
pub fn AvatarFallbackExample() -> Html {
    html! {
        <Flex gap=2>
            <Avatar fallback="A" />
            <Avatar fallback="AB" />
            <Avatar
                fallback={html! {
                    <Box width="24px" height="24px">
                        <svg viewBox="0 0 64 64" fill="currentColor">
                            <path d="M41.5 14c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S33 27.962 33 23 36.813 14 41.5 14zM56.289 43.609C57.254 46.21 55.3 49 52.506 49c-2.759 0-11.035 0-11.035 0 .689-5.371-4.525-10.747-8.541-13.03 2.388-1.171 5.149-1.834 8.07-1.834C48.044 34.136 54.187 37.944 56.289 43.609zM37.289 46.609C38.254 49.21 36.3 52 33.506 52c-5.753 0-17.259 0-23.012 0-2.782 0-4.753-2.779-3.783-5.392 2.102-5.665 8.245-9.472 15.289-9.472S35.187 40.944 37.289 46.609zM21.5 17c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S13 30.962 13 26 16.813 17 21.5 17z" />
                        </svg>
                    </Box>
                }}
            />
        </Flex>
    }
}

See Also