Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Media

/

Avatar

The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

rx.chakra.hstack(
    rx.chakra.avatar(size="sm"),
    rx.chakra.avatar(name="Barack Obama", size="md"),
    rx.chakra.avatar(name="Donald Trump", size="lg"),
    rx.chakra.avatar(name="Joe Biden", size="xl"),
)

Avatar components can be grouped into avatar groups for easier display.

rx.chakra.avatar_group(
    rx.chakra.avatar(name="Barack Obama"),
    rx.chakra.avatar(name="Donald Trump"),
    rx.chakra.avatar(name="Joe Biden"),
)

Badges can also be applied to show elements about the avatar such as activity.

rx.chakra.avatar_group(
    rx.chakra.avatar(
        rx.chakra.avatar_badge(
            box_size="1.25em",
            bg="green.500",
            border_color="green.500",
        ),
        name="Barack Obama",
    ),
    rx.chakra.avatar(
        rx.chakra.avatar_badge(
            box_size="1.25em",
            bg="yellow.500",
            border_color="red.500",
        ),
        name="Donald Trump",
    ),
)

If there are too many avatar to display a limit can be set using the max_ prop.

+2
rx.chakra.avatar_group(
    *([rx.chakra.avatar(name="Barack Obama")] * 5),
    size="md",
    max_=3,
)

The image that represents the user.

PropTypeDescriptionValues
iconstr

The default avatar used as fallback when name, and src is not specified.

icon_labelstr

The label of the icon.

ignore_fallbackbool

If true, opt out of the avatar's fallback logic and renders the img at all times.

namestr

The name of the person in the avatar.

show_borderbool

If true, the Avatar will show a border around it. Best for a group of avatars.

srcstr

The image url of the Avatar.

src_setstr

List of sources to use for different screen resolutions.

sizeLiteral

"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"

Event Triggers

TriggerDescription
on_error

The on_error event handler is called when the user encounters an error in a form. For example, it’s called when the user clicks on a error button.

A wrapper that displays its content on the right corner of the avatar.

Props

No component specific props

Event Triggers

No component specific event triggers

A wrapper to stack multiple Avatars together.

PropTypeDescriptionValues
max_int

The maximum number of visible avatars.

spacingint

The space between the avatars in the group.

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting