Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Typography

/

Text

The quick brown fox jumps over the lazy dog.

rx.text("The quick brown fox jumps over the lazy dog.")

Use the as_ prop to render text as a p, label, div or span. This prop is purely semantic and does not alter visual appearance.

This is a paragraph element.

This is a div element.
This is a span element.
rx.flex(
    rx.text(
        "This is a ",
        rx.text.strong("paragraph"),
        " element.",
        as_="p",
    ),
    rx.text(
        "This is a ",
        rx.text.strong("label"),
        " element.",
        as_="label",
    ),
    rx.text(
        "This is a ",
        rx.text.strong("div"),
        " element.",
        as_="div",
    ),
    rx.text(
        "This is a ",
        rx.text.strong("span"),
        " element.",
        as_="span",
    ),
    direction="column",
    spacing="3",
)

Use the size prop to control text size. This prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

rx.flex(
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        size="1",
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        size="2",
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        size="3",
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        size="4",
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        size="5",
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        size="6",
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        size="7",
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        size="8",
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        size="9",
    ),
    direction="column",
    spacing="3",
)

Sizes 2–4 are designed to work well for long-form content. Sizes 1–3 are designed to work well for UI labels.

Use the weight prop to set the text weight.

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
rx.flex(
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        weight="light",
        as_="div",
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        weight="regular",
        as_="div",
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        weight="medium",
        as_="div",
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        weight="bold",
        as_="div",
    ),
    direction="column",
    spacing="3",
)

Use the align prop to set text alignment.

Left-aligned
Center-aligned
Right-aligned
rx.flex(
    rx.text("Left-aligned", align="left", as_="div"),
    rx.text("Center-aligned", align="center", as_="div"),
    rx.text("Right-aligned", align="right", as_="div"),
    direction="column",
    spacing="3",
    width="100%",
)

Use the trim prop to trim the leading space at the start, end, or both sides of the text box.

Without Trim

With Trim

rx.flex(
    rx.text(
        "Without Trim",
        trim="normal",
        style={
            "background": "var(--gray-a2)",
            "border_top": "1px dashed var(--gray-a7)",
            "border_bottom": "1px dashed var(--gray-a7)",
        },
    ),
    rx.text(
        "With Trim",
        trim="both",
        style={
            "background": "var(--gray-a2)",
            "border_top": "1px dashed var(--gray-a7)",
            "border_bottom": "1px dashed var(--gray-a7)",
        },
    ),
    direction="column",
    spacing="3",
)

Trimming the leading is useful when dialing in vertical spacing in cards or other “boxy” components. Otherwise, padding looks larger on top and bottom than on the sides.

Without trim

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

With trim

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

rx.flex(
    rx.box(
        rx.heading(
            "Without trim",
            margin_bottom="4px",
            size="3",
        ),
        rx.text(
            "The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant."
        ),
        style={
            "background": "var(--gray-a2)",
            "border": "1px dashed var(--gray-a7)",
        },
        padding="16px",
    ),
    rx.box(
        rx.heading(
            "With trim",
            margin_bottom="4px",
            size="3",
            trim="start",
        ),
        rx.text(
            "The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant."
        ),
        style={
            "background": "var(--gray-a2)",
            "border": "1px dashed var(--gray-a7)",
        },
        padding="16px",
    ),
    direction="column",
    spacing="3",
)

Use the color_scheme prop to assign a specific color, ignoring the global theme.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

rx.flex(
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        color_scheme="indigo",
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        color_scheme="cyan",
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        color_scheme="crimson",
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        color_scheme="orange",
    ),
    direction="column",
)

Use the high_contrast prop to increase color contrast with the background.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

rx.flex(
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        color_scheme="indigo",
        high_contrast=True,
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        color_scheme="cyan",
        high_contrast=True,
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        color_scheme="crimson",
        high_contrast=True,
    ),
    rx.text(
        "The quick brown fox jumps over the lazy dog.",
        color_scheme="orange",
        high_contrast=True,
    ),
    direction="column",
)

Compose Text with formatting components to add emphasis and structure to content.

Look, such a helpful link, an italic emphasis a piece of computer code, and even a hotkey combination ⇧⌘A within the text.

rx.text(
    "Look, such a helpful ",
    rx.link("link", href="#"),
    ", an ",
    rx.text.em("italic emphasis"),
    " a piece of computer ",
    rx.code("code"),
    ", and even a hotkey combination ",
    rx.text.kbd("⇧⌘A"),
    " within the text.",
    size="5",
)

Composing text with a form control like checkbox, radiogroup, or switch automatically centers the control with the first line of text, even when the text is multi-line.

rx.box(
    rx.text(
        rx.flex(
            rx.checkbox(default_checked=True),
            "I understand that these documents are confidential and cannot be shared with a third party.",
        ),
        as_="label",
        size="3",
    ),
    style={"max_width": 300},
)

A foundational text primitive based on the element.

Test

PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child, merging their props and behavior.

as_Literal

Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)

sizeLiteral

Text size: "1" - "9"

weightLiteral

Thickness of text: "light" | "regular" | "medium" | "bold"

alignLiteral

Alignment of text in element: "left" | "center" | "right"

trimLiteral

Removes the leading trim space: "normal" | "start" | "end" | "both"

color_schemeLiteral

Overrides the accent color inherited from the Theme.

high_contrastbool

Whether to render the text with higher contrast color

Event Triggers

No component specific event triggers

Marks text to stress emphasis.

Props

No component specific props

Event Triggers

No component specific event triggers

← Strong

Did you find this useful?

HomeGalleryChangelogIntroductionHosting