ReflexKR

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

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

Badge

rx.badge

Official docs

Workshop order

Next to each line of the order list, show its status at a glance: 'Paid', 'Pending' or 'Failed'.

rx.badge is a small tag that marks an item's status or category in a word or two. Use it for short, eye-catching labels like "New", "Paid" or "Beta". Pass text as the first argument and it goes straight into the tag.

New

rx.badge("New")

Try the props

Five props decide how a badge looks. Change a value and the badge and the code change together.

Try the props

New

label

variant

size

color

radius

high_contrast

rx.badge("New", variant="soft", size="1", color_scheme="indigo", radius="medium", high_contrast=False)

variant picks the fill style, size the size and color_scheme the color. high_contrast boosts the contrast between text and background.

Prop	Values	Default	Use
`variant`	`"solid"` `"soft"` `"surface"` `"outline"`	`"soft"`	Fill style; solid is the strongest
`size`	`"1"` `"2"` `"3"`	`"1"`	Size and inner padding
`color_scheme`	Radix color name	Theme color	Color that carries the status's meaning
`high_contrast`	`True` / `False`	`False`	Stronger contrast between text and background
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	Theme value	Corner rounding

Sizes

size sets the size and the inner padding together. The official docs only mention "1" and "2", but Reflex 0.10 accepts "3" as well.

NewNewNew

rx.flex(
    rx.badge("New", size="1"),
    rx.badge("New", size="2"),
    rx.badge("New", size="3"),
    align="center",
    spacing="2",
)

Four variants

solid fills the badge with color, soft uses a pale background, surface adds a border to the pale background, and outline draws only the border. With nothing set, you get soft.

solidsoftsurfaceoutline

rx.flex(
    rx.badge("solid", variant="solid"),
    rx.badge("soft", variant="soft"),
    rx.badge("surface", variant="surface"),
    rx.badge("outline", variant="outline"),
    spacing="2",
    wrap="wrap",
)

Meaning through color

color_scheme sets this badge's color regardless of the site-wide theme color. Give colors a meaning, such as green for success, amber for caution and red for failure, and the status shows before anyone reads the text.

PaidPendingFailedDraft

rx.flex(
    rx.badge("Paid", color_scheme="green"),
    rx.badge("Pending", color_scheme="amber"),
    rx.badge("Failed", color_scheme="red"),
    rx.badge("Draft", color_scheme="gray"),
    spacing="2",
    wrap="wrap",
)

Contrast and corners

high_contrast=True darkens the text to increase contrast. The top row is the default; the bottom row is high contrast.

NewNewNewNew

rx.flex(
    rx.flex(
        rx.badge("New", variant="solid"),
        rx.badge("New", variant="soft"),
        rx.badge("New", variant="surface"),
        rx.badge("New", variant="outline"),
        spacing="2",
    ),
    rx.flex(
        rx.badge("New", variant="solid", high_contrast=True),
        rx.badge("New", variant="soft", high_contrast=True),
        rx.badge("New", variant="surface", high_contrast=True),
        rx.badge("New", variant="outline", high_contrast=True),
        spacing="2",
    ),
    direction="column",
    spacing="2",
)

radius ignores the theme's corner setting and rounds just this badge. For a pill shape, use "full".

nonesmallmediumlargefull

rx.flex(
    rx.badge("none", radius="none"),
    rx.badge("small", radius="small"),
    rx.badge("medium", radius="medium"),
    rx.badge("large", radius="large"),
    rx.badge("full", radius="full"),
    spacing="2",
    wrap="wrap",
)

With an icon

A badge can hold other components, not just text. Lay out an icon and text side by side with rx.flex as the official docs do, or simply pass them in as children one after another.

8.8%

2.1%

rx.flex(
    rx.badge(
        rx.flex(rx.icon("arrow-up", size=14), rx.text("8.8%"), spacing="1", align="center"),
        color_scheme="grass",
    ),
    rx.badge(rx.icon("arrow-down", size=14), "2.1%", color_scheme="red"),
    spacing="2",
)

A badge driven by State

Both the text and the color can take State values. Use rx.match to pick a color for each status.

Pending

class BadgeStatusState(rx.State):
    status: str = "Pending"

    @rx.event
    def set_badge_status(self, value: str):
        self.status = value


rx.flex(
    rx.select(["Pending", "Paid", "Failed"], value=BadgeStatusState.status, on_change=BadgeStatusState.set_badge_status),
    rx.badge(
        BadgeStatusState.status,
        color_scheme=rx.match(BadgeStatusState.status, ("Paid", "green"), ("Failed", "red"), "amber"),
        size="2",
    ),
    spacing="3",
    align="center",
)

Filling the order

Put a status badge next to each order number. Finished business (a refund) is toned down with outline and gray.

#1024

Paid

#1025

Pending

#1026

Refunded

rx.flex(
    rx.hstack(rx.text("#1024", weight="bold"), rx.badge("Paid", color_scheme="green"), align="center"),
    rx.hstack(rx.text("#1025", weight="bold"), rx.badge("Pending", color_scheme="amber"), align="center"),
    rx.hstack(rx.text("#1026", weight="bold"), rx.badge("Refunded", color_scheme="gray", variant="outline"), align="center"),
    direction="column",
    spacing="2",
)

Workshop notes

Create it with rx.badge("text") and use it for short status or category labels.
variant: solid · soft (default) · surface · outline.
size goes from "1" to "3" (the docs only list 1 and 2); radius sets the corners separately.
Put meaning into color_scheme, and when it depends on a State value, choose it with rx.match.
Pass rx.icon or rx.flex as children to show an icon together with text.

← Previous

Forms · Upload

Data display · Avatar

Get news about new lessons

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