reflex/docs/library/chakra/media/avatar.md

components
rx.chakra.Avatar rx.chakra.AvatarBadge rx.chakra.AvatarGroup

import reflex as rx

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.

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