Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Typography

/

Code

console.log()
rx.code("console.log()")

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.

console.log()console.log()console.log()console.log()console.log()console.log()console.log()console.log()console.log()
rx.flex(
    rx.code("console.log()", size="1"),
    rx.code("console.log()", size="2"),
    rx.code("console.log()", size="3"),
    rx.code("console.log()", size="4"),
    rx.code("console.log()", size="5"),
    rx.code("console.log()", size="6"),
    rx.code("console.log()", size="7"),
    rx.code("console.log()", size="8"),
    rx.code("console.log()", size="9"),
    direction="column",
    spacing="3",
    align="start",
)

Use the weight prop to set the text weight.

console.log()console.log()console.log()console.log()
rx.flex(
    rx.code("console.log()", weight="light"),
    rx.code("console.log()", weight="regular"),
    rx.code("console.log()", weight="medium"),
    rx.code("console.log()", weight="bold"),
    direction="column",
    spacing="3",
)

Use the variant prop to control the visual style.

console.log()console.log()console.log()console.log()
rx.flex(
    rx.code("console.log()", variant="solid"),
    rx.code("console.log()", variant="soft"),
    rx.code("console.log()", variant="outline"),
    rx.code("console.log()", variant="ghost"),
    direction="column",
    spacing="2",
    align="start",
)

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

console.log()console.log()console.log()console.log()
rx.flex(
    rx.code("console.log()", color_scheme="indigo"),
    rx.code("console.log()", color_scheme="crimson"),
    rx.code("console.log()", color_scheme="orange"),
    rx.code("console.log()", color_scheme="cyan"),
    direction="column",
    spacing="2",
    align="start",
)

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

console.log()console.log()console.log()console.log()
console.log()console.log()console.log()console.log()
rx.flex(
    rx.flex(
        rx.code("console.log()", variant="solid"),
        rx.code("console.log()", variant="soft"),
        rx.code("console.log()", variant="outline"),
        rx.code("console.log()", variant="ghost"),
        direction="column",
        align="start",
        spacing="2",
    ),
    rx.flex(
        rx.code(
            "console.log()",
            variant="solid",
            high_contrast=True,
        ),
        rx.code(
            "console.log()",
            variant="soft",
            high_contrast=True,
        ),
        rx.code(
            "console.log()",
            variant="outline",
            high_contrast=True,
        ),
        rx.code(
            "console.log()",
            variant="ghost",
            high_contrast=True,
        ),
        direction="column",
        align="start",
        spacing="2",
    ),
    spacing="3",
)

A block level extended quotation.

Test
PropTypeDescriptionValues
variantLiteral

The visual variant to apply: "solid" | "soft" | "outline" | "ghost"

sizeLiteral

Text size: "1" - "9"

weightLiteral

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

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

← BlockquoteEm →

Did you find this useful?