Strong

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

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",
)

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",
)

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",
)

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",
)