Skip to content
Site volume
Colourway

Components

Link

Inline links are always underlined; standalone links carry weight and an arrow; quiet links serve footers and legal lines.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/link
On this page

Example#

Look of this example

Usage#

Use a link to go somewhere: another page, a section, a file, another site. Doing something on this page is a Button.

  • inline (default) sits in running text and is always underlined, so it never depends on colour.
  • standalone stands on its own line, such as "Read the case study", in the control weight with a trailing arrow; the underline appears on hover and focus.
  • quiet prints in the text ink, underlined, for footers and legal lines where many links sit together.
  • Other sites get an arrow up and to the right automatically. With target="_blank", the link adds "(opens in a new tab)" for screen readers and rel="noopener".
  • The current page takes current, which sets aria-current="page".

Anatomy#

Volume#

Reading layer: links read the same at every volume. Only the art around the paragraph changes.

Content#

  • The words say where the link goes: "Read the Fernlight case study", not "Click here" or "Learn more".
  • Link the words that name the destination, not a whole sentence.
  • Never put two links with the same words and different destinations on one page.

Do and don't#

Do

Pebblepath rebuilt the menu. Read the Fernlight case study.

The link names its destination.

Don't

Pebblepath rebuilt the menu. To read the case study, click here.

Out of context, the link says nothing.

Screen reader users often list a page's links on their own. Each one has to make sense without the sentence around it.

Accessibility#

  • The underline is the affordance on inline links; standalone links are told apart by weight and the arrow, so nothing depends on colour.
  • Absolute URLs get the external arrow; with target="_blank" a hidden "(opens in a new tab)" joins the name and rel="noopener" is set.
  • current sets aria-current="page". Visited links keep the unvisited colour.
KeysWhat happens
TabMoves focus to the link
EnterFollows the link

The colour pairs it prints, with their contrast on both papers:

TextSurfaceRoleBoneNight
--mk-ink-m-text--mk-paperbody-ui 8.62:1 · Lc 82.5, passes 13.43:1 · Lc 83.5, passes
--mk-ink-m-text--mk-paper-platebody-ui 9.63:1 · Lc 90.1, passes 12.45:1 · Lc 82.7, passes
--mk-ink-a-text--mk-paperbody-ui 8.09:1 · Lc 82.7, passes 13.41:1 · Lc 83.5, passes
--mk-ink-a-text--mk-paper-platebody-ui 9.04:1 · Lc 90.3, passes 12.42:1 · Lc 82.7, passes
--mk-ink-r-text--mk-paperbody-ui 8.20:1 · Lc 82.6, passes 13.38:1 · Lc 83.3, passes
--mk-ink-r-text--mk-paper-platebody-ui 9.16:1 · Lc 90.2, passes 12.40:1 · Lc 82.5, passes
--mk-ink-k-text--mk-paperbody-ui 16.49:1 · Lc 97.4, passes 16.21:1 · Lc 96.1, passes
--mk-ink-k-text--mk-paper-platebody-ui 18.42:1 · Lc 105.1, passes 15.02:1 · Lc 95.4, passes
--mk-ink-wood-text--mk-paperbody-ui 7.97:1 · Lc 82.6, passes 13.38:1 · Lc 83.3, passes
--mk-ink-wood-text--mk-paper-platebody-ui 8.90:1 · Lc 90.2, passes 12.40:1 · Lc 82.5, passes
--mk-ink-go-text--mk-paperbody-ui 8.14:1 · Lc 82.8, passes 13.38:1 · Lc 83.7, passes
--mk-ink-go-text--mk-paper-platebody-ui 9.10:1 · Lc 90.4, passes 12.40:1 · Lc 83.0, passes
--mk-ink-m-text--mk-paper-sunkenmeta 7.95:1 · Lc 77.2, passes 12.87:1 · Lc 83.1, passes
--mk-ink-m-text--mk-ink-m-tintmeta 7.95:1 · Lc 77.2, passes 11.43:1 · Lc 81.6, passes
--mk-ink-a-text--mk-paper-sunkenmeta 7.46:1 · Lc 77.4, passes 12.84:1 · Lc 83.0, passes
--mk-ink-a-text--mk-ink-a-tintmeta 7.66:1 · Lc 79.1, passes 11.15:1 · Lc 81.2, passes
--mk-ink-r-text--mk-paper-sunkenmeta 7.56:1 · Lc 77.3, passes 12.82:1 · Lc 82.9, passes
--mk-ink-r-text--mk-ink-r-tintmeta 7.62:1 · Lc 77.9, passes 11.34:1 · Lc 81.3, passes
--mk-ink-k-text--mk-paper-sunkenmeta 15.20:1 · Lc 92.2, passes 15.53:1 · Lc 95.7, passes
--mk-ink-k-text--mk-ink-k-tintmeta 15.38:1 · Lc 92.9, passes 13.59:1 · Lc 94.2, passes
--mk-ink-wood-text--mk-paper-sunkenmeta 7.35:1 · Lc 77.3, passes 12.82:1 · Lc 82.9, passes
--mk-ink-wood-text--mk-ink-wood-tintmeta 7.45:1 · Lc 78.2, passes 11.31:1 · Lc 81.3, passes
--mk-ink-go-text--mk-paper-sunkenmeta 7.51:1 · Lc 77.5, passes 12.82:1 · Lc 83.3, passes
--mk-ink-go-text--mk-ink-go-tintmeta 7.73:1 · Lc 79.4, passes 11.05:1 · Lc 81.5, passes

Process at Studio, normal contrast. Every look: the press check.

Props#

PropTypeDefaultDescription
href requiredstringnone
variantLinkVariantnone
externalbooleannoneAuto for absolute URLs: the `arrow-up-right` glyph, and with `target="_blank"` a hidden note.
currentbooleannone`aria-current="page"`.
newTabLabelstringnoneThe hidden note for `target="_blank"` (literal copy, D-I2).
renderRenderPropnone
children requiredReactNodenone

Plus 286 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from LinkProps in packages/overprint-react/src/reading/link/link.tsx.

Tokens#

System tokens (13)

Its own properties (1)

  • --mk-link-glyph-gap

Scanned from its CSS at build and checked against its registry entry; 5 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactThe reading layer's controls, overlays, forms and visitor prefs (P2-T1 to P2-T5): every Button is the comic hit key, with IconButton, Link and Tooltip; Input, Textarea, Select, Checkbox and CheckboxGroup, Radio and RadioGroup, Switch, Slider with the ruler, RulerReadout and SegmentedControl; Dialog, Drawer, NavSheet, Tabs, Disclosure, Faq and faqJsonLd on Base UI 1.9 where the platform falls short; Field, Fieldset, Form with the site's inline validation, ErrorSummary, Callout, Honeypot, FormTimestamp and QuoteForm; PrefsScript under 1 KB, usePref and setPref with cross-tab sync, ThemeToggle and the visitor VolumeDial; VisuallyHidden.