Link

Docs draft

Component story Figma component set ↗React component ↗DSDS entity ↗

When to use it

useNavigating: to a series page, an episode, settings, anywhere the URL changes.

avoidTriggering an action in the current view. Buttons act; links navigate — even when the design wants it to look quiet, that is a ghost Button, not a Link. button

Variants

inline — Inline links sit in body copy and underline at rest — color alone cannot mark them against reading text, since the rest color IS the reading color. Standalone links (nav rows, See all) skip the resting underline, as the old system did.

States

rest — At rest with no interaction.

hover — Pointer is over the control.

pressed — Actively pressed by pointer or key.

focused — Holds keyboard focus and shows the focus ring.

disabled — Not interactive; rendered with the lifted disabled tokens so it stays perceivable.

Guidelines

mustHover and pressed colors are the semantic link roles, never raw brand orange. — The old Link set hard-coded #FF640A labels at 2.8:1 on light. The link-role tokens are contracted in the gate.

mustLinks inside body copy set inline, which underlines them at rest. — The resting link color is the reading color; without the underline an inline link is invisible until hovered.

shouldLabel with the destination, not the mechanics: Episode 12, My Crunchylist — not Click here. — Screen-reader link lists read labels out of context.

API

Prop	Type	Description
`inline`	`boolean`	Renders the underline at rest, for links inside body copy.
`...rest`	`AnchorHTMLAttributes`	Forwarded to the native anchor; href is expected.

Design specifications

color-rest	color.text.link
color-hover	color.text.link-hover
color-pressed	color.text.link-active
color-disabled	color.text.disabled
typography	inherited; Figma set shows type.body and type.body-sm

Accessibility

Enter — Follows the link.

Tab — Moves focus; focus-visible draws the 2px text.primary ring and underlines.

color.text.link on color.bg.primary — Contracted at ≥ 4.5:1 by the build gate.

color.text.link-hover on color.bg.primary — Contracted at ≥ 4.5:1 by the build gate.

color.text.link-active on color.bg.primary — Contracted at ≥ 4.5:1 by the build gate.

Renders a real anchor; navigation semantics come free. Never a div or button with a router push.