ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Typography

Link

rx.linkrx.redirect

Official docs

Workshop order

In the footer at the very bottom of the site, add two links to pages on the site and one external link that opens in a new tab.

rx.link is text you click to go somewhere else. Write the destination in href: an external address (https://…), a path inside this app (/courses) or a spot on the same page (#id).

Reflex Home Page.

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

Try the props

A link's look comes from text props much like those of rx.text, plus underline. Turn on is_external and it opens in a new tab.

Try the props

Visit Reflex

label

underline

size

weight

trim

color

high_contrast

is_external

rx.link("Visit Reflex", href="https://reflex.dev/", underline="auto", size="3", weight="regular", trim="normal", color_scheme="indigo", high_contrast=False, is_external=True)

underline decides when the underline shows. With auto, Radix decides based on context; usually it appears on hover.

Prop	Values	Default	Use
`href`	address string	none	Destination: external address, app path or `#id`
`is_external`	`True` / `False`	`False`	Open in a new tab (`target="_blank"`)
`underline`	`"auto"` `"hover"` `"always"` `"none"`	`"auto"`	When the underline shows
`size`	`"1"` ~ `"9"`	inherited	Font size
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	inherited	Font weight
`trim`	`"normal"` `"start"` `"end"` `"both"`	`"normal"`	Trims the line-height space above and below
`color_scheme`	Radix color name	theme color	Text color
`high_contrast`	`True` / `False`	`False`	Stronger contrast against the background
`target`	`"_self"` `"_blank"` `"_parent"` `"_top"`	none	Sets where it opens directly
`rel`	string	none	Link relationship (`"nofollow"`, `"noopener"` …)
`download`	`True` or a file name	none	Download as a file instead of navigating
`referrer_policy` · `href_lang` · `media` · `ping`	HTML `<a>` attributes	none	Passed straight to `<a>`

The only events are the standard ones such as on_click.

To another page in the app

An href that starts with / is a path in this app. You do not need the full address, and Reflex swaps the screen without reloading the page (client-side navigation), so it is faster than an external link.

Home Courses

rx.flex(
    rx.link("Home", href="/"),
    rx.link("Courses", href="/courses"),
    spacing="4",
)

Wrapping other components

Put a button or a card in as the child instead of text and the whole component becomes a link. When wrapping something large like a card, you usually remove the underline with underline="none".

Reflex docs

Open the official docs

rx.flex(
    rx.link(rx.button("Example"), href="https://reflex.dev/"),
    rx.link(
        rx.card(rx.text("Reflex docs", weight="bold"), rx.text("Open the official docs", size="2", color_scheme="gray")),
        href="https://reflex.dev/docs/",
        is_external=True,
        underline="none",
    ),
    spacing="4",
    align="center",
    wrap="wrap",
)

Anchors: to one spot on the page

Give a component id="lib-link-footer" and a link with href="#lib-link-footer" scrolls the screen to it. For a spot on another page, append # and the id to the path, as in "/courses/some-page#lib-link-footer". Click the link below to jump to the "Filling the order" example at the end of this page.

Jump to the footer below

rx.link("Jump to the footer below", href="#lib-link-footer")

Underline, size and color

Compare the four underline values. hover shows the underline only when the mouse is over the link, and auto usually behaves the same way. Size, weight, color, contrast and trim work just as in rx.text.

underline auto underline hover underline always underline none

rx.flex(
    rx.link("underline auto", href="#", underline="auto"),
    rx.link("underline hover", href="#", underline="hover"),
    rx.link("underline always", href="#", underline="always"),
    rx.link("underline none", href="#", underline="none"),
    direction="column",
    spacing="3",
)

Size 2, regular Size 4, medium Size 6, bold crimson high contrast With Trim

rx.flex(
    rx.link("Size 2, regular", href="#", size="2"),
    rx.link("Size 4, medium", href="#", size="4", weight="medium"),
    rx.link("Size 6, bold", href="#", size="6", weight="bold"),
    rx.link("crimson", href="#", color_scheme="crimson"),
    rx.link("high contrast", href="#", high_contrast=True),
    rx.link(
        "With Trim",
        href="#",
        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",
)

Navigating from State: rx.redirect

To change pages after an event handler has done its work, such as navigating after saving, return rx.redirect("path") instead of using a link. Click the button below to go to the home page.

class LinkRedirectState(rx.State):
    @rx.event
    def go_home(self):
        return rx.redirect("/")


rx.button(rx.icon("house"), "Save and go home", on_click=LinkRedirectState.go_home)

Filling the order

Links within the site use href="/…"; the external link opens in a new tab with is_external=True. Footer links are toned down with gray and underline="hover". This footer has id="lib-link-footer", which is where the anchor link above brings you.

rx.flex(
    rx.text("Shop", weight="bold", size="2"),
    rx.link("Home", href="/", size="2", color_scheme="gray", underline="hover"),
    rx.link("Courses", href="/courses", size="2", color_scheme="gray", underline="hover"),
    rx.spacer(),
    rx.link("GitHub", rx.icon("external-link", size=14), href="https://github.com/reflex-dev/reflex", is_external=True, size="2",
            color_scheme="gray", underline="hover", display="flex", align_items="center", gap="4px"),
    id="lib-link-footer",
    spacing="4",
    align="center",
    wrap="wrap",
    padding="12px 16px",
    border_top=f"1px solid {rx.color('gray', 6)}",
    width="100%",
)

Workshop notes

rx.link("text", href="…"). Works with external addresses, app paths (/…) and #id on the same page.
App paths navigate without reloading the page. For a new tab, is_external=True.
underline: auto · hover · always · none. The other text props are the same as in rx.text.
Put a button or a card in as the child and the whole thing becomes a link.
To navigate from inside a handler: return rx.redirect("/path").

← Previous

Typography · Heading

Typography · Code

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.