Linkcomponent

Link(props: LinkProps): ReactElement

Param	Type
`props`	`LinkProps`	Props for Link — identical to ClickableProps (href for navigation or onClick for actions). required

Return
`ReactElement`	Rendered inline `<a>` or `<button>` element.

Inline link — delegates to <Clickable>, rendering an <a> (when href is set) or <button> (when onClick is set).

An inline link or action. Delegates to <Clickable>, rendering an <a> when href is provided or a <button> when onClick is provided — so the same component covers both navigation and in-page actions. Prefer it over a raw <a> inside React components.

Things to know:

It handles busy state, URL resolution, and active-page highlighting automatically via the shared <Clickable> helper.
An <a> (any actual link) shows an underline that disappears on hover; a <button> variant carries no underline.
Reach for Link for inline text links; for standalone calls to action use a button-styled component instead.
Inside <Prose> a raw <a> picks up the same styling, so Markdown-rendered links match component ones.

Usage

Link inside body copy

tsx

import { Paragraph, Link } from "shelving/ui";

<Paragraph>
  Read our <Link href="/privacy">privacy policy</Link> for details.
</Paragraph>

Action button

tsx

import { Link } from "shelving/ui";

<Link onClick={() => save()}>Save now</Link>

Styling

Link exposes a couple of inline hooks; the link colour comes from the global --color-link token.

Variable	Styles	Default
`--link-weight`	Text colour and font weight	`var(--color-link)` colour / `var(--weight-strong)` weight

Global tokens it reads: --color-link, --weight-strong, and --stroke-normal (the underline thickness).

Examples

<Link href="/about">About us</Link>