Component

A styled anchor element for navigating between pages or external URLs. Supports size, color, and the asChild composition pattern.

View component changelog
preview
Default linkBlue linkRed linkLarge link
React
"use client"

import Link from "@radui/ui/Link"

const LinkExample = () => {
    return (
        <div className="flex flex-col gap-3">
            <Link href="#">Default link</Link>
            <Link href="#" color="blue">Blue link</Link>
            <Link href="#" color="red">Red link</Link>
            <Link href="#" size="lg">Large link</Link>
        </div>
    )
}

export default LinkExample
ShortcutDescription
Tab

Moves focus to the next focusable element in document focus order.

Enter

Activates the focused link and follows its href.

ReferenceWhat Rad UI follows
Link pattern

Uses native anchor semantics by default, with href carrying the destination and Enter providing keyboard activation.

Import all parts of the component and piece them together

React
import Link from "@radui/ui/Link"

export default () => {
    return <Link href="#">Label</Link>
}

A styled anchor element.

PropTypeDefault
href
string
"#"
size
string
""
color
string
""
asChild
boolean
false
customRootClass
string
""
Edit this page on GitHub →