Skip to main content
The Link component provides a styled navigation link with support for different visual variants, sizes, and optional icons.

​
Basic Usage

import reflex_ui as ui

ui.link("Visit our docs", to="/docs")

​
Variants

Links come in 2 visual styles: 
ui.link("Primary Link", to="/page", variant="primary")
ui.link("Secondary Link", to="/page", variant="secondary")  # Default
​
variant
Literal['primary', 'secondary']
default:"secondary"
The visual style variant of the link. Primary uses the primary color, Secondary uses the secondary color.

​
Sizes

ui.link("Extra Small", to="/page", size="xs")
ui.link("Small", to="/page", size="sm")  # Default
ui.link("Medium", to="/page", size="md")
ui.link("Large", to="/page", size="lg")
ui.link("Extra Large", to="/page", size="xl")
​
size
Literal['xs', 'sm', 'md', 'lg', 'xl']
default:"sm"
The size of the link text

​
With Icon

ui.link(
    "External Link",
    to="https://example.com",
    show_icon=True
)
​
show_icon
bool
default:"False"
Whether to display a link icon that appears on hover
ui.link(
    "GitHub",
    to="https://github.com",
    show_icon=True
)

rx.hstack(
    ui.link("Home", to="/"),
    ui.link("About", to="/about"),
    ui.link("Contact", to="/contact"),
    spacing="1.5rem"
)

​
In Navigation Menu

rx.vstack(
    ui.link("Dashboard", to="/dashboard", variant="primary"),
    ui.link("Settings", to="/settings"),
    ui.link("Profile", to="/profile"),
    ui.link("Help", to="/help"),
    align_items="flex-start",
    spacing="0.5rem"
)

​
Props Reference

​
to
str
required
The page or URL to navigate to. Can be an internal path (e.g., /about) or external URL (e.g., https://example.com).
​
class_name
str
Additional CSS classes for styling

​
Styling

From source code at reflex_ui/components/base/link.py:15-19:
  • Base: Medium font weight, underline on hover, fitted width
  • Icon: Positioned absolute, appears on hover with opacity transition
  • Size variants control text size (xs through xl)
  • Variant determines the color (primary or secondary color scale)

​
Implementation Details

From source code at reflex_ui/components/base/link.py:37-105:
  • Extends React Router’s Link component
  • Automatically validates variant and size at creation
  • Icon appears 1.25rem to the right on hover
  • Uses the LinkSquare02Icon from HugeIcon
  • Supports all React Router Link props
  • Underline offset for better visual spacing

Build docs developers (and LLMs) love

Get started for freeTalk to us