Reflex | Avatar

✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨

Docs Blog Changelog

Search documentation...

Star

12k+

[ Learn ]

Getting Started

Tutorial

[ Concepts ]

[ Reference ]

Avatar

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

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

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

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

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

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

Avatar

The image that represents the user.

Props

Prop	Type	Description
`icon`	str	The default avatar used as fallback when name, and src is not specified.
`icon_label`	str	The label of the icon.
`ignore_fallback`	bool	If true, opt out of the avatar's fallback logic and renders the img at all times.
`name`	str	The name of the person in the avatar.
`show_border`	bool	If true, the Avatar will show a border around it. Best for a group of avatars.
`src`	str	The image url of the Avatar.
`src_set`	str	List of sources to use for different screen resolutions.
`size`	str	"2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "full"

Event Triggers

AvatarBadge

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

No props for AvatarBadge.

Base Event Triggers

AvatarGroup

A wrapper to stack multiple Avatars together.

Props

Prop	Type	Description
`max_`	int	The maximum number of visible avatars.
`spacing`	int	The space between the avatars in the group.

Base Event Triggers

← Spinner Image →

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

Avatar

Avatar

Props

Event Triggers

Base Event Triggers

Component Specific Triggers

AvatarBadge

No props for AvatarBadge.

Base Event Triggers

AvatarGroup

Props

Base Event Triggers

[ Learn ]