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

Strong

rx.text.strong

Official docs

Workshop order

In the firmware update notice, make sure the part "do not unplug it until the light turns green" gets read.

rx.text.strong marks a part of a sentence as important. It renders an HTML <strong> tag and looks bold. Use it for things nobody should miss: warnings, deadlines, amounts.

The most important thing to remember is, stay positive.

rx.text("The most important thing to remember is, ", rx.text.strong("stay positive"), ".")

Props

Strong has no styling props such as size or color. It follows the size and color of the surrounding rx.text and only adds weight. That is why this page has an example driven by State instead of a props lab.

Prop	Values	Default	Use
child	string, State value, component	required	The text of the important part

It also takes common HTML attributes such as id, title and lang, plus the standard events.

How it differs from weight="bold"

The two lines look equally bold. But rx.text.strong is a <strong> tag, so the meaning "this is important" stays in the HTML, while weight="bold" is only bold in appearance. Screen readers and search engines read that meaning. Use weight when you make something bold purely for design, and Strong when the content itself is important.

Semantic: Do not unplug during the update.

Visual only: Do not unplug during the update.

rx.flex(
    rx.text("Semantic: ", rx.text.strong("Do not unplug during the update"), "."),
    rx.text("Visual only: ", rx.text("Do not unplug during the update", weight="bold", as_="span"), "."),
    direction="column",
    spacing="3",
)

It follows the outer text

The Strong part keeps the size and color of the surrounding text.

Small gray text with strong part.

Large crimson text with strong part.

rx.flex(
    rx.text("Small gray text with ", rx.text.strong("strong part"), ".", size="2", color_scheme="gray"),
    rx.text("Large crimson text with ", rx.text.strong("strong part"), ".", size="5", color_scheme="crimson"),
    direction="column",
    spacing="3",
)

Emphasizing a State value

Put a State value in as the child and the emphasized part changes when the value does. Pick a shipping method and the bold delivery time changes.

Your order arrives in 3 days.

class StrongShippingState(rx.State):
    option: str = "Standard"

    @rx.var
    def days(self) -> str:
        return {"Express": "1 day", "Standard": "3 days", "Economy": "7 days"}[self.option]

    @rx.event
    def choose(self, value: str):
        self.option = value


rx.flex(
    rx.flex(
        rx.button("Express", size="1", variant=rx.cond(StrongShippingState.option == "Express", "solid", "soft"),
                  on_click=StrongShippingState.choose("Express")),
        rx.button("Standard", size="1", variant=rx.cond(StrongShippingState.option == "Standard", "solid", "soft"),
                  on_click=StrongShippingState.choose("Standard")),
        rx.button("Economy", size="1", variant=rx.cond(StrongShippingState.option == "Economy", "solid", "soft"),
                  on_click=StrongShippingState.choose("Economy")),
        spacing="2",
    ),
    rx.text("Your order arrives in ", rx.text.strong(StrongShippingState.days), ".", size="4"),
    direction="column",
    align="start",
    spacing="3",
)

Filling the order

Leave the notice as plain text and wrap only the one phrase that must be followed in rx.text.strong. With too much emphasis in one paragraph, nothing stands out.

Keep the device connected. Do not unplug it until the light turns green, or the update will fail.

rx.callout.root(
    rx.callout.icon(rx.icon("triangle-alert")),
    rx.callout.text(
        "Keep the device connected. ",
        rx.text.strong("Do not unplug it until the light turns green"),
        ", or the update will fail.",
    ),
    color_scheme="amber",
)

Workshop notes

rx.text.strong("…") marks an important part (<strong>). Put it in an rx.text as a child.
It has no styling props; it keeps the size and color of the surrounding text and only adds weight.
Strong when the meaning matters, weight="bold" when it is just bold for design.
Use emphasis sparingly, about once per paragraph.

← Previous

Typography · Quote

Typography · Em

Get news about new lessons

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