Link
A real anchor with a visible focus ring, rather than a span styled to look like one.
@luc/uiExamples
Three variants
Variant is emphasis, not decoration: `default` is a link in body copy, `accent` is the LUC link colour, and `muted` steps a reference down beside a heading.
<Link href="/components/typography">Browse the catalogue</Link>
<Link href="/components/typography" variant="muted">Secondary reference</Link>
<Link href="/charts/catalog" variant="accent">Open the chart catalogue</Link>Underline behaviour
The default leaves the rule to the pointer, which is right in a navigation list and weak inside a paragraph — there, `underline="always"` keeps the link identifiable without relying on colour alone.
<Link href="/charts/catalog" variant="accent">On hover (default)</Link>
<Link href="/charts/catalog" variant="accent" underline="always">Always</Link>
<Link href="/charts/catalog" variant="accent" underline="none">None</Link>In a sentence
An inline-flex anchor sits in the text flow and keeps the browser's own affordances: middle click, copy link address, the status preview.
Install the package once, then import.
<Text as="p">
<Link href="/docs/installation" variant="accent" underline="always">
Install the package
</Link>{" "}
once, then import.
</Text>An external destination
A link that leaves the site says so; the icon is decoration and the label carries the meaning.
<Link href="https://remixicon.com/" target="_blank" rel="noreferrer" variant="accent">
Remix Icon
<Icon name="external" size="sm" />
</Link>Usage
import { Link } from "@luc/ui";<Link href="/charts">Open the chart catalogue</Link>Package setup — peer requirements, the stylesheet and the provider — is on installation.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
Link | 2 documented props | ({ className, variant, underline, children, ...props }: LinkProps) => import("@types/react").JSX.Element |
Link props
Type: LinkProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
underline? | "none" | "always" | "hover" | undefined | — | Show the underline on hover only (default) or always. |
variant? | "accent" | "default" | "muted" | undefined | — |
Guidelines
Do
- Use `variant="accent"` for a link inside prose and `muted` for a secondary one, so the emphasis matches the sentence it sits in.
- Use `underline="always"` where colour alone is not a reliable cue — a dense table, a printed page, a link in body copy.
- Keep the destination in `href` so the browser's own affordances keep working: middle click, copy link address, the status bar.
Don't
- Style a `span` as a link: the keyboard behaviour, the context menu and the status preview all come from the element.
- Use a link for an action that changes state — that is a `Button`.
- Rely on hover for the underline and on colour for the meaning at the same time; the default is fine in a navigation list and weak in a paragraph.
Accessibility
The element is a real anchor, so its role, focus and activation come from the browser, and `luc-focus` supplies the visible focus ring. Underline style is a variant rather than an afterthought: on a surface where colour is the only other cue, `underline="always"` is the accessible choice.
Family
Actions
Things a person presses, and the chrome that gathers them.
8 documented entries in this family. Open the family index
Related