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

Typography

Kbd

rx.text.kbd

Official docs

Workshop order

In the notes app's help window, build a shortcut table that lists each feature name next to its shortcut.

rx.text.kbd shows keyboard keys and shortcuts as keycaps. It renders an HTML <kbd> tag. Use it in help pages, shortcut guides and tutorial steps like "press this key".

Shift + Tab

rx.text.kbd("Shift + Tab")

Try the props

Kbd has a single styling prop: size. Change the text to try other keys as well.

Try the props

Ctrl + K

label

size

rx.text.kbd("Ctrl + K", size="3")

A larger size makes both the keycap and the text bigger.

Prop	Values	Default	Use
child	string, State value	required	Key name
`size`	`"1"` ~ `"9"`	inherited	Keycap and font size

Unlike Text or Heading, the Kbd type in 0.10 does not accept per-breakpoint values (a dict) for size. The only events are the standard ones.

Size

size runs from "1" to "9". The larger it is, the tighter the relative line height and letter spacing. Leave it out and it follows the size of the surrounding text.

Shift + TabShift + TabShift + TabShift + TabShift + Tab

rx.flex(
    rx.text.kbd("Shift + Tab", size="1"),
    rx.text.kbd("Shift + Tab", size="3"),
    rx.text.kbd("Shift + Tab", size="5"),
    rx.text.kbd("Shift + Tab", size="7"),
    rx.text.kbd("Shift + Tab", size="9"),
    direction="column",
    align="start",
    spacing="3",
)

Shortcuts inside a sentence

Put it in an rx.text as a child and the keycap sits inside the sentence. You can wrap each key separately or the whole combination at once.

Press Ctrl + S to save.

Undo with Ctrl + Z, redo with Ctrl + Y.

rx.flex(
    rx.text("Press ", rx.text.kbd("Ctrl"), " + ", rx.text.kbd("S"), " to save.", size="3"),
    rx.text("Undo with ", rx.text.kbd("Ctrl + Z"), ", redo with ", rx.text.kbd("Ctrl + Y"), ".", size="2", color_scheme="gray"),
    direction="column",
    spacing="3",
)

Showing pressed keys as keycaps

An input's on_key_down passes the name of the pressed key and whether Ctrl, Alt, Shift or Meta was held. Store those in State and show them with rx.text.kbd. Click the input and try Shift+K or Alt+1.

?

class KbdKeyState(rx.State):
    key: str = "?"
    mods: list[str] = []

    @rx.event
    def press(self, key: str, info: rx.event.KeyInputInfo):
        names = {"ctrl_key": "Control", "alt_key": "Alt", "shift_key": "Shift", "meta_key": "Meta"}
        self.mods = [name for flag, name in names.items() if info.get(flag) and name != key]
        self.key = "Space" if key == " " else key


rx.flex(
    rx.input(placeholder="Click here and press any keys", on_key_down=KbdKeyState.press, width="260px"),
    rx.flex(
        rx.foreach(KbdKeyState.mods, lambda m: rx.fragment(rx.text.kbd(m, size="4"), rx.text("+", size="4"))),
        rx.text.kbd(KbdKeyState.key, size="4"),
        spacing="2",
        align="center",
    ),
    direction="column",
    align="start",
    spacing="3",
)

Filling the order

Put the feature names and shortcuts in two columns of an rx.table, and wrap only the shortcut cells in rx.text.kbd.

Save	`Ctrl + S`
Search	`Ctrl + K`
New note	`Ctrl + N`
Close	`Esc`

rx.table.root(
    rx.table.body(
        rx.table.row(rx.table.cell("Save"), rx.table.cell(rx.text.kbd("Ctrl + S"))),
        rx.table.row(rx.table.cell("Search"), rx.table.cell(rx.text.kbd("Ctrl + K"))),
        rx.table.row(rx.table.cell("New note"), rx.table.cell(rx.text.kbd("Ctrl + N"))),
        rx.table.row(rx.table.cell("Close"), rx.table.cell(rx.text.kbd("Esc"))),
    ),
    size="1",
    max_width="320px",
)

Workshop notes

rx.text.kbd("…") is a key name shaped like a keycap (<kbd>).
Its only styling prop is size "1" to "9". Without it, it follows the size of the outer text.
Put it in a sentence as a child: one per key, or the whole combination at once.
on_key_down(key, info) gives you the pressed key to show from State.

← Previous

Typography · Em

Forms · Button

Get news about new lessons

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