New components library - Native UI

︲

︲

Avatar

Displays a user's profile picture, initials, or fallback icon.

Installation

Copy the following code into your app directory.

uv

uv run buridan add component avatar
from components.ui.avatar import avatar

Anatomy

Use the following composition to build an Avatar component.

avatar.root( avatar.image(), avatar.fallback(), )

Examples

Basic

A basic avatar component with an image and a fallback.

AH
import reflex as rx

from components.ui.avatar import avatar


def avatar_basic() -> rx.Component:
    return avatar.root(
        avatar.image(
            src="https://github.com/LineIndent.png",
            custom_attrs={"alt": "@lineindent"},
        ),
        avatar.fallback("AH"),
    )

Badge

Use the avatar.badge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.

AH
import reflex as rx

from components.ui.avatar import avatar


def avatar_with_badge() -> rx.Component:
    return avatar.root(
        avatar.image(
            src="https://avatars.githubusercontent.com/u/84860195?v=4",
            custom_attrs={"alt": "@LineIndent"},
        ),
        avatar.fallback("AH"),
        avatar.badge(
            class_name="bg-green-600 dark:bg-green-800",
        ),
    )

Use the class_Name prop to add custom styles to the badge such as custom colors, sizes, etc.

reflex

avatar.badge(class_name="bg-green-600 dark:bg-green-800")

Badge with Icon

You can also use an icon inside avatar.badge.

RD
import reflex as rx

from components.icons.hugeicon import hi
from components.ui.avatar import avatar


def avatar_badge_icon() -> rx.Component:
    return avatar.root(
        avatar.image(
            src="https://avatars.githubusercontent.com/u/104714959?s=200&v=4",
            custom_attrs={"alt": "Reflex Dev"},
        ),
        avatar.fallback("RD"),
        avatar.badge(
            hi("PlusSignIcon"),
        ),
    )

Avatar Group

Use the avatar.group component to add a group of avatars.

RDLIAH
import reflex as rx

from components.ui.avatar import avatar


def avatar_as_group() -> rx.Component:
    return avatar.group(
        avatar.root(
            avatar.image(
                src="/avatars/01.png",
                custom_attrs={"alt": "@avatar-1"},
            ),
            avatar.fallback("RD"),
        ),
        avatar.root(
            avatar.image(
                src="/avatars/02.png",
                custom_attrs={"alt": "@avatar-2"},
            ),
            avatar.fallback("LI"),
        ),
        avatar.root(
            avatar.fallback("AH"),
        ),
        class_name="grayscale",
    )

Avatar Group Count

Use avatar.group_count to add a count to the group.

AHRDLI
+3
import reflex as rx

from components.ui.avatar import avatar


def avatar_with_group_count() -> rx.Component:
    return avatar.group(
        avatar.root(
            avatar.fallback("AH"),
        ),
        avatar.root(
            avatar.image(
                src="/avatars/01.png",
                custom_attrs={"alt": "@avatar-1"},
            ),
            avatar.fallback("RD"),
        ),
        avatar.root(
            avatar.image(
                src="/avatars/02.png",
                custom_attrs={"alt": "@avatar-2"},
            ),
            avatar.fallback("LI"),
        ),
        avatar.group_count("+3"),
        class_name="grayscale",
    )

Avatar Group with Icon

You can also use an icon inside avatar.group_count.

AHCNLI
import reflex as rx

from components.icons.hugeicon import hi
from components.ui.avatar import avatar


def avatar_group_count_icon() -> rx.Component:
    return avatar.group(
        avatar.root(
            avatar.fallback("AH"),
        ),
        avatar.root(
            avatar.image(
                src="https://avatars.githubusercontent.com/u/104714959?s=200&v=4",
                custom_attrs={"alt": "@reflex-dev"},
            ),
            avatar.fallback("CN"),
        ),
        avatar.root(
            avatar.image(
                src="https://avatars.githubusercontent.com/u/84860195?v=4",
                custom_attrs={"alt": "LineIndent"},
            ),
            avatar.fallback("LI"),
        ),
        avatar.group_count(
            hi("PlusSignIcon"),
        ),
        class_name="grayscale",
    )

Sizes

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

LILILI
import reflex as rx

from components.ui.avatar import avatar


def avatar_sizes() -> rx.Component:
    return rx.el.div(
        avatar.root(
            avatar.image(
                src="https://avatars.githubusercontent.com/u/84860195?v=4",
                custom_attrs={"alt": "@LineIndent"},
            ),
            avatar.fallback("LI"),
            size="sm",
        ),
        avatar.root(
            avatar.image(
                src="https://avatars.githubusercontent.com/u/84860195?v=4",
                custom_attrs={"alt": "@LineIndent"},
            ),
            avatar.fallback("LI"),
        ),
        avatar.root(
            avatar.image(
                src="https://avatars.githubusercontent.com/u/84860195?v=4",
                custom_attrs={"alt": "@LineIndent"},
            ),
            avatar.fallback("LI"),
            size="lg",
        ),
        class_name="flex flex-wrap items-center gap-2",
    )

Dropdown

You can use the Avatar component as a trigger for a dropdown menu.

import reflex as rx

from components.ui.avatar import avatar
from components.ui.button import button
from components.ui.menu import menu


def avatar_dropdown_menu() -> rx.Component:
    return menu.root(
        menu.trigger(
            render_=button(
                avatar.root(
                    avatar.image(
                        src="https://github.com/LineIndent.png",
                        custom_attrs={"alt": "lineindent"},
                    ),
                    avatar.fallback("LI"),
                ),
                variant="ghost",
                size="icon",
                class_name="rounded-full",
            )
        ),
        menu.portal(
            menu.positioner(
                menu.popup(
                    menu.group(
                        menu.item("Profile"),
                        menu.item("Billing"),
                        menu.item("Settings"),
                    ),
                    class_name="w-32",
                ),
            )
        ),
    )

API Reference

avatar.root

The avatar.root component is the root component that wraps the avatar image and fallback.

PropTypeDefault
size"default" | "sm" | "lg""default"
class_namestring-

avatar.image

The avatar.image component displays the avatar image. It accepts all Base UI Avatar Image props.

PropTypeDefault
srcstring-
altstring-
class_namestring-

avatar.fallback

The avatar.fallback component displays a fallback when the image fails to load. It accepts all Base UI Avatar Fallback props.

PropTypeDefault
class_namestring-

avatar.badge

The avatar.badge component displays a badge indicator on the avatar, typically positioned at the bottom right.

PropTypeDefault
class_namestring-

avatar.group

The avatar.group component displays a group of avatars with overlapping styling.

PropTypeDefault
class_namestring-

avatar.group_count

The avatar.group_count component displays a count indicator in an avatar group, typically showing the number of additional avatars.

PropTypeDefault
class_namestring-