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

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

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

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

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

rc.avatar_group(
    rc.avatar(
        rc.avatar_badge(
            box_size="1.25em",
            bg="green.500",
            border_color="green.500",
        ),
        name="Barack Obama",
    ),
    rc.avatar(
        rc.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
rc.avatar_group(
    *([rc.avatar(name="Barack Obama")] * 5),
    size="md",
    max_=3,
)

rc.Avatar

The image that represents the user.

PropType | ValuesDefault
icon
str
icon_label
str
ignore_fallback
bool
name
str
show_border
bool
src
str
src_set
str
size
"sm" | "md" | "lg" | ...

Event Triggers

See the full list of default event triggers
TriggerDescription
on_error Fired when the image fails to load.

rc.AvatarBadge

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

Props

No component specific props

rc.AvatarGroup

A wrapper to stack multiple Avatars together.

PropType | ValuesDefault
max_
int
spacing
int