︲

︲

Link

Custom link component.

Installation

Copy the following code into your app directory.

uv

buridan add component link
Usage
from components.ui.link import Link
Anatomy

Use the following composition to build a Link

link()
Examples

Below are examples demonstrating how the component can be used.

General
This is a link
import reflex as rx
from components.ui.link import link


def link_general():
    """A basic link example."""
    return link("This is a link", href="#")
Sizes
X-Small LinkSmall LinkMedium LinkLarge LinkX-Large Link
import reflex as rx
from components.ui.link import link


def link_sizes():
    """Link examples with different sizes."""
    return rx.box(
        link("X-Small Link", href="#", size="xs"),
        link("Small Link", href="#", size="sm"),
        link("Medium Link", href="#", size="md"),
        link("Large Link", href="#", size="lg"),
        link("X-Large Link", href="#", size="xl"),
        class_name="flex flex-col items-start gap-4",
    )
Variants
Primary LinkSecondary Link
import reflex as rx
from components.ui.link import link


def link_variants():
    """Link examples with different variants."""
    return rx.box(
        link("Primary Link", href="#", variant="primary"),
        link("Secondary Link", href="#", variant="secondary"),
        class_name="flex flex-col items-start gap-4",
    )
With Icon
Link with icon
import reflex as rx
from components.ui.link import link


def link_with_icon():
    """Link example with an icon."""
    return link("Link with icon", href="#", show_icon=True)