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

Forms

Button

rx.buttonrx.icon_button

Official docs

Workshop order

For the checkout screen, make one prominent 'Buy' button and one less important 'Cancel' button.

rx.button is where something happens when you press it. Use it anywhere the user "runs" something: save, submit, next step, open a dialog. Pass it text and the text goes straight inside the button.

rx.button("Save")

Try the props

A button's look is mostly set by five props. Change the values in the lab below and the button and the code change together.

Try the props

label

variant

size

color

radius

high_contrast

disabled

rx.button("Buy now", variant="solid", size="2", color_scheme="indigo", radius="medium", high_contrast=False, loading=False, disabled=False)

variant picks how much emphasis, size picks the size, color_scheme picks the color. Turn on loading and a spinner replaces the label and the button can't be pressed.

Prop	Values	Default	Use
`variant`	`"classic"` `"solid"` `"soft"` `"surface"` `"outline"` `"ghost"`	`"solid"`	Emphasis. solid for the main action on a screen, soft · outline · ghost for secondary ones
`size`	`"1"` ~ `"4"`	`"2"`	Height and font size
`color_scheme`	Radix color name (`"indigo"`, `"red"` …)	theme color	A color with meaning, like red for delete and green for success
`radius`	`"none"` `"small"` `"medium"` `"large"` `"full"`	theme value	Corner roundness
`high_contrast`	`True` / `False`	`False`	More contrast against the background
`loading`	`True` / `False`	`False`	Show a spinner and block presses
`disabled`	`True` / `False`	`False`	Block presses

Six variants

Ordered from strongest to weakest emphasis. Use a strong variant only for the one main action on a screen, and users know right away what to press.

rx.flex(
    rx.button("classic", variant="classic"),
    rx.button("solid", variant="solid"),
    rx.button("soft", variant="soft"),
    rx.button("surface", variant="surface"),
    rx.button("outline", variant="outline"),
    rx.button("ghost", variant="ghost"),
    spacing="3",
    wrap="wrap",
)

With icons

Put an rx.icon among the children and the icon sits next to the label. For a button with only an icon, use rx.icon_button and give it a name with aria_label for screen readers.

rx.flex(
    rx.button(rx.icon("download"), "Download"),
    rx.button("Next", rx.icon("arrow-right"), variant="soft"),
    rx.icon_button(rx.icon("heart"), variant="outline", aria_label="Like"),
    spacing="3",
    align="center",
)

Pressing changes State

The heart of a button is on_click. Wire it to a State event handler, and every press changes the value on the server and the screen follows. You can also pass a mix of text and State values as children.

class ButtonCountState(rx.State):
    count: int = 0

    @rx.event
    def increment(self):
        self.count += 1

    @rx.event
    def reset_count(self):
        self.count = 0


rx.flex(
    rx.button("Clicked ", ButtonCountState.count, " times", on_click=ButtonCountState.increment),
    rx.button("Reset", on_click=ButtonCountState.reset_count, variant="soft", color_scheme="gray"),
    spacing="3",
)

Filling the order

The main action, 'Buy', is solid; 'Cancel', which backs out, is toned down with soft and gray.

rx.flex(
    rx.button("Cancel", variant="soft", color_scheme="gray"),
    rx.button(rx.icon("shopping-cart"), "Buy now"),
    spacing="3",
    justify="end",
)

Workshop notes

Create it with rx.button("label") and wire an event handler to on_click.
variant: classic · solid · soft · surface · outline · ghost. Go strong on only one main action.
size is "1"–"4", color_scheme is a color with meaning, loading · disabled block presses.
For icons, add rx.icon as a child; for an icon-only button, use rx.icon_button + aria_label.
To use it as a submit button inside a form, set type="submit" (covered on the Form page).

← Previous

Typography · Kbd

Forms · Input

Get news about new lessons

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