Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

Typography

Code

console.log()

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

Size

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

Weight

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

Variant

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

Color

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

High Contrast

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

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

API Reference

Code

A block level extended quotation.

Test

Prop	Type	Description
`variant`	Literal	The visual variant to apply: "solid" \| "soft" \| "outline" \| "ghost"
`size`	Literal	Text size: "1" - "9"
`weight`	Literal	Thickness of text: "light" \| "regular" \| "medium" \| "bold"
`color_scheme`	Literal	Overrides the accent color inherited from the Theme.
`high_contrast`	bool	Whether to render the text with higher contrast color