Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Typography

/

Link

Links are accessible elements used primarily for navigation. Use the href prop to specify the location for the link to navigate to.

rx.link("Reflex Home Page.", href="https://reflex.dev")

You can also provide local links to other pages in your project without writing the full url.

rx.link(
    "Example",
    href="/docs/library",
)

The link component can be used to wrap other components to make them link to other pages.

rx.link(rx.button("Example"), href="https://reflex.dev")

You can also create anchors to link to specific parts of a page using the id prop.

Example
rx.box("Example", id="example")

To reference an anchor, you can use the href prop of the link component. The href should be in the format of the page you want to link to followed by a # and the id of the anchor.

rx.link(
    "Example", href="/docs/library/typography/link#example"
)

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

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

Use the weight prop to set the text weight.

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

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

Without TrimWith Trim
rx.flex(
    rx.link(
        "Without Trim",
        trim="normal",
        style={
            "background": "var(--gray-a2)",
            "border_top": "1px dashed var(--gray-a7)",
            "border_bottom": "1px dashed var(--gray-a7)",
        },
    ),
    rx.link(
        "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",
)

Use the underline prop to manage the visibility of the underline affordance. It defaults to auto.

rx.flex(
    rx.link(
        "The quick brown fox jumps over the lazy dog.",
        underline="auto",
    ),
    rx.link(
        "The quick brown fox jumps over the lazy dog.",
        underline="hover",
    ),
    rx.link(
        "The quick brown fox jumps over the lazy dog.",
        underline="always",
    ),
    direction="column",
    spacing="3",
)

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

rx.flex(
    rx.link(
        "The quick brown fox jumps over the lazy dog.",
        color_scheme="indigo",
    ),
    rx.link(
        "The quick brown fox jumps over the lazy dog.",
        color_scheme="cyan",
    ),
    rx.link(
        "The quick brown fox jumps over the lazy dog.",
        color_scheme="crimson",
    ),
    rx.link(
        "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.

rx.flex(
    rx.link("The quick brown fox jumps over the lazy dog."),
    rx.link(
        "The quick brown fox jumps over the lazy dog.",
        high_contrast=True,
    ),
    direction="column",
)

A semantic element for navigation between pages.

PropTypeDescriptionValues
as_childbool

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

sizeLiteral

Text size: "1" - "9"

weightLiteral

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

trimLiteral

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

underlineLiteral

Sets the visibility of the underline affordance: "auto" | "hover" | "always"

color_schemeLiteral

Overrides the accent color inherited from the Theme.

high_contrastbool

Whether to render the text with higher contrast color

is_externalbool

If True, the link will open in a new tab

Event Triggers

No component specific event triggers

← KbdMarkdown →

Did you find this useful?