Avatar

python

import reflex as rx

The Avatar component is used to represent a user, and display their profile pictures or fallback texts such as initials.

Basic Example

To create an avatar component with an image, pass the image URL as the src prop.

python

rx.avatar(src="https://web.reflex-assets.dev/other/logo.jpg")

To display a text such as initials, set the fallback prop without passing the src prop.

python

rx.avatar(fallback="RX")

Styling

Size

The size prop controls the size and spacing of the avatar. The acceptable size is from "1" to "9", with "3" being the default.

python

rx.flex(
    rx.avatar(
        src="https://web.reflex-assets.dev/other/logo.jpg", fallback="RX", size="1"
    ),
    rx.avatar(
        src="https://web.reflex-assets.dev/other/logo.jpg", fallback="RX", size="2"
    ),
    rx.avatar(
        src="https://web.reflex-assets.dev/other/logo.jpg", fallback="RX", size="3"
    ),
    rx.avatar(src="https://web.reflex-assets.dev/other/logo.jpg", fallback="RX"),
    rx.avatar(
        src="https://web.reflex-assets.dev/other/logo.jpg", fallback="RX", size="4"
    ),
    rx.avatar(
        src="https://web.reflex-assets.dev/other/logo.jpg", fallback="RX", size="5"
    ),
    rx.avatar(
        src="https://web.reflex-assets.dev/other/logo.jpg", fallback="RX", size="6"
    ),
    rx.avatar(
        src="https://web.reflex-assets.dev/other/logo.jpg", fallback="RX", size="7"
    ),
    rx.avatar(
        src="https://web.reflex-assets.dev/other/logo.jpg", fallback="RX", size="8"
    ),
    spacing="1",
)

Variant

The variant prop controls the visual style of the avatar fallback text. The variant can be "solid" or "soft". The default is "soft".

python

rx.flex(
    rx.avatar(fallback="RX", variant="solid"),
    rx.avatar(fallback="RX", variant="soft"),
    rx.avatar(fallback="RX"),
    spacing="2",
)

Color Scheme

The color_scheme prop sets a specific color to the fallback text, ignoring the global theme.

python

rx.flex(
    rx.avatar(fallback="RX", color_scheme="indigo"),
    rx.avatar(fallback="RX", color_scheme="cyan"),
    rx.avatar(fallback="RX", color_scheme="orange"),
    rx.avatar(fallback="RX", color_scheme="crimson"),
    spacing="2",
)

High Contrast

The high_contrast prop increases color contrast of the fallback text with the background.

python

rx.grid(
    rx.avatar(fallback="RX", variant="solid"),
    rx.avatar(fallback="RX", variant="solid", high_contrast=True),
    rx.avatar(fallback="RX", variant="soft"),
    rx.avatar(fallback="RX", variant="soft", high_contrast=True),
    rows="2",
    spacing="2",
    flow="column",
)

Radius

The radius prop sets specific radius value, ignoring the global theme. It can take values "none" | "small" | "medium" | "large" | "full".

python

rx.grid(
    rx.avatar(
        src="https://web.reflex-assets.dev/other/logo.jpg", fallback="RX", radius="none"
    ),
    rx.avatar(fallback="RX", radius="none"),
    rx.avatar(
        src="https://web.reflex-assets.dev/other/logo.jpg",
        fallback="RX",
        radius="small",
    ),
    rx.avatar(fallback="RX", radius="small"),
    rx.avatar(
        src="https://web.reflex-assets.dev/other/logo.jpg",
        fallback="RX",
        radius="medium",
    ),
    rx.avatar(fallback="RX", radius="medium"),
    rx.avatar(
        src="https://web.reflex-assets.dev/other/logo.jpg",
        fallback="RX",
        radius="large",
    ),
    rx.avatar(fallback="RX", radius="large"),
    rx.avatar(
        src="https://web.reflex-assets.dev/other/logo.jpg", fallback="RX", radius="full"
    ),
    rx.avatar(fallback="RX", radius="full"),
    rows="2",
    spacing="2",
    flow="column",
)

Fallback

The fallback prop indicates the rendered text when the src cannot be loaded.

python

rx.flex(
    rx.avatar(fallback="RX"),
    rx.avatar(fallback="PC"),
    spacing="2",
)

Final Example

As part of a user profile page, the Avatar component is used to display the user's profile picture, with the fallback text showing the user's initials. Text components displays the user's full name and username handle and a Button component shows the edit profile button.

python

rx.flex(
    rx.avatar(
        src="https://web.reflex-assets.dev/other/logo.jpg", fallback="RU", size="9"
    ),
    rx.text("Reflex User", weight="bold", size="4"),
    rx.text("@reflexuser", color_scheme="gray"),
    rx.button("Edit Profile", color_scheme="indigo", variant="solid"),
    direction="column",
    spacing="1",
)