Anchor

Inline text link — a styled <a> with a token underline, an offset, and the shared focus ring. variant="muted" sits quietly in body copy until hovered. Wrap a framework link with asChild (e.g. next/link) to keep client-side navigation. RSC-safe.

Compare the terracotta finishes, then read the care guide before ordering samples.

Usage

import { Anchor, AnchorProps, anchorVariants } from "@desk/ui/components/anchor";

Best practices

Anchor is for links inside prose and body copy — for a button-shaped navigation action wrap your link in Button asChild instead.
Compose routers via asChild (<Anchor asChild><Link href="…">…</Link></Anchor>) — never nest a raw <a> inside Anchor's own <a>.
Use variant="muted" inside dense copy so the underline stays quiet; the default variant is for standalone links.

Props

Prop	Type	Default	Description
asChild	`boolean`		Merge props onto the child element instead of rendering an `<a>` — use for framework links: `<Anchor asChild><Link href="/…">…</Link></Anchor>`.
variant	`"default" \| "muted" \| null \| undefined`

Also exports

interfaceAnchorProps
constanchorVariants