R

ReflexKR

Reflex Docs

The Component Workshop: Reflex's 100 Library Components

·

Course overview

Layout

·

Box

·

Flex

·

Stack

·

Grid

·

Container

·

Section

·

Center

·

Spacer

·

Separator

·

Card

·

Inset

·

Aspect Ratio

·

Fragment

Typography

·

Text

·

Heading

·

Link

·

Code

·

Markdown

·

Blockquote

·

Quote

·

Strong

·

Em

·

Kbd

Forms

·

Button

·

Input

·

Text Area

·

Checkbox

·

Switch

·

Radio Group

·

Select

·

Slider

·

Form

·

Upload

Data display

·

Badge

·

Avatar

·

Icon

·

Callout

·

List

·

Data List

·

Code Block

·

Progress

·

Spinner

·

Scroll Area

·

Moment

Disclosure

·

Tabs

·

Accordion

·

Segmented Control

Overlay

·

Tooltip

·

Popover

·

Hover Card

·

Dialog

·

Alert Dialog

·

Drawer

·

Dropdown Menu

·

Context Menu

·

Toast

Dynamic rendering

·

Cond

·

Match

·

Foreach

·

Auto Scroll

Media

·

Image

·

Audio

·

Video

Tables and data grids

·

Table

·

Data Table

·

Data Editor

Charts

·

Area Chart

·

Bar Chart

·

Line Chart

·

Composed Chart

·

Pie Chart

·

Radar Chart

·

Radial Bar Chart

·

Scatter Chart

·

Funnel Chart

·

Treemap

·

Sankey Chart

·

Error Bar

Chart parts

·

Axis

·

Cartesian Grid

·

Chart Tooltip

·

Legend

·

Label

·

Reference

·

Brush

Other chart libraries

·

Plotly

·

Pyplot

HTML elements

·

HTML

·

HTML Text

·

HTML Layout

·

HTML Forms

·

HTML Media

·

HTML Tables

·

SVG

Other tools

·

Theme

·

Skeleton

·

Clipboard

·

Html Embed

·

Script

·

Memo

The Component Workshop: Reflex's 100 Library Components
Data display

Avatar

rx.avatar

Official docs

Workshop order

Put a round user photo at the top of the profile card. For people without a photo, show the first letter of their name instead.

rx.avatar is a small picture that represents a user. Pass an image URL as src to show a photo; leave out src and give only fallback to show text such as initials. Use it wherever you show "who": comments, profiles, participant lists.

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200"),
    rx.avatar(fallback="RX"),
    spacing="3",
)

Try the props

Clear src and the fallback text appears. variant, color_scheme and high_contrast apply to how that fallback looks.

Try the props

src

fallback

size

variant

color

radius

high_contrast

rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="4", variant="soft", color_scheme="indigo", radius="full", high_contrast=False)
Empty src to see the fallback. size runs from "1" to "9", and radius "full" makes a circle.
PropValuesDefaultUse
srcImage URLNoneThe photo to show
fallbackTextNoneWhat to show when there is no photo or it fails to load
size"1" ~ "9""3"Size
variant"solid" "soft""soft"Background fill behind the fallback
color_schemeRadix color nameTheme colorColor of the fallback
high_contrastTrue / FalseFalseStronger contrast between fallback and background
radius"none" "small" "medium" "large" "full"Theme valueCorner rounding

Sizes

size goes from "1" to "9" and defaults to "3". Small faces in a list suit "1"–"2"; a profile header looks right at "6" or above.

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="1"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="2"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="3"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="4"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="5"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="6"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="7"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="8"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="9"),
    spacing="2",
    align="center",
    wrap="wrap",
)

Variant and color

variant sets the background behind the fallback. "solid" fills it with color, while the default "soft" uses a pale fill. color_scheme applies its color regardless of the theme.

rx.flex(
    rx.avatar(fallback="RX", variant="solid"),
    rx.avatar(fallback="RX", variant="soft"),
    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",
    wrap="wrap",
)

high_contrast=True increases the contrast between the fallback and its background. The left column is the default; the right column is high contrast.

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",
    flow="column",
    spacing="2",
    width="max-content",
)

Corners

radius ignores the theme's corner setting and rounds just this avatar. It applies to both the photo and the fallback.

rx.flex(
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="none"),
    rx.avatar(fallback="RX", radius="small"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="medium"),
    rx.avatar(fallback="RX", radius="large"),
    rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="full"),
    spacing="2",
)

When the photo fails to load

fallback is what shows instead when src can't be loaded. The two avatars below point to files that don't exist, so their fallback text appears. In Reflex 0.10, fallback accepts only text (str).

rx.flex(
    rx.avatar(src="/no-such-photo.png", fallback="PC"),
    rx.avatar(src="/no-such-photo.png", fallback="?", color_scheme="gray"),
    spacing="2",
)

Filling the order

Inside a card, place a large avatar, the name and handle, and an edit button in one row. If the photo fails to load, "RU" appears instead.

Reflex User

@reflexuser

rx.card(
    rx.flex(
        rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RU", size="6", radius="full"),
        rx.flex(
            rx.text("Reflex User", weight="bold", size="4"),
            rx.text("@reflexuser", color_scheme="gray", size="2"),
            direction="column",
        ),
        rx.spacer(),
        rx.button("Edit Profile", variant="soft", size="2"),
        spacing="4",
        align="center",
        width="100%",
    ),
    max_width="420px",
)

Workshop notes

  • Give a photo with rx.avatar(src=…) and fallback text with fallback=…. Setting both is the safe choice.

  • size "1" to "9" (default "3"); radius="full" makes a circle.

  • variant (solid · soft), color_scheme and high_contrast change how the fallback looks.

  • If src fails to load, the fallback shows automatically.

← Previous

Data display · Badge

Next →

Data display · Icon

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.

We collect: your email address · Purpose: news about new lessons or the launch of this course · Kept until: you ask us to remove it. We never use it for anything else or share it. Reply to any notice email and we'll delete it right away.

Questions & answers

Ask anything about this lesson. Questions from every language version of this page appear together.

Shown as plain text, without links or formatting.

R

ReflexKR

Learn Python and Reflex by doing. Every example was run and verified on Reflex 0.10.0.

ReflexKR is free, with no banner ads. If it helped you, you can support it with a coffee. ☕ Buy us a coffee

Affiliate disclosure
한국어English日本語简体中文EspañolDeutsch

© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0

Built with Reflex