Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Chakra

/

Navigation

/

Link

Links are accessible elements used primarily for navigation.

Example
rx.chakra.link(
    "Example",
    href="https://reflex.dev",
    color="rgb(107,99,246)",
)

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

rx.chakra.link(
    "Example", href="/docs/library", color="rgb(107,99,246)"
)

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

rx.chakra.link(
    rx.chakra.button("Example"),
    href="https://reflex.dev",
    color="rgb(107,99,246)",
    button=True,
)

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

Example
rx.chakra.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.chakra.link(
    "Example",
    href="/docs/library/navigation/link#example",
    color="rgb(107,99,246)",
)

Link to another page.

PropTypeDescriptionValues
relstr

The rel.

hrefstr

The page to link to.

textstr

The text to display.

as_str

What the link renders to.

is_externalbool

If true, the link will open in new tab.

Event Triggers

See the full list of default event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting