Skip to content
design system
Thème d’affichage, actuellement Auto

atom · stable · site, app, extension · since 2026-09

Link

Purpose

A link in running text, underlined. The underline carries the link and the colour only supports it: a link told from its sentence by colour alone is the most common failure of criterion 3.1 on the web, and the one the product audits other sites for.

When to use, when not

Use it for a link inside a sentence or a list. For a link that acts as a call to action, use Button with href; for the site’s navigation, the header’s own links.

Anatomy

  1. An a, bold, in the action colour, underlined four pixels under the baseline.

Props

Props of Link
NameTypeDefaultWhat it does
hrefstringThe destination.
class?string''Layout classes only: a margin.
childrenSnippetThe text, which says the destination on its own.

Every other attribute of Omit<HTMLAnchorAttributes, 'children' | 'href'> passes through to the element.

States

Plain, and inside a sentence.

inSentence

The link reads without colour: underlined, thicker on hover.

Light

Le relevé est public, écarts compris, et il bouge à chaque tour de banc.

Dark

Le relevé est public, écarts compris, et il bouge à chaque tour de banc.

320 px, light

Le relevé est public, écarts compris, et il bouge à chaque tour de banc.

320 px, dark

Le relevé est public, écarts compris, et il bouge à chaque tour de banc.

216 px, light

Le relevé est public, écarts compris, et il bouge à chaque tour de banc.

Forced colours, captured
Link, story inSentence, as Chromium renders it with forced colours active

plain

Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
Link, story plain, as Chromium renders it with forced colours active

Accessibility contract

  • Role and name: a link named by its text.
  • Keyboard: Tab and Enter, native.
  • Focus: the ring of the base layer.
  • Hover: the line thickens; the colour shift is secondary.

Content rules

The text says the destination (“la méthode”, “le mode d’emploi”), never “ici” or “cliquez”. A link that opens a document says its format.

Do and don’t

  • Do let the underline show; never remove it to make the sentence “cleaner”.
  • Do not put two links with the same text and different destinations on one page.

Examples

<Prose>Le relevé est public, <Link href="/methode">écarts compris</Link>.</Prose>

Surfaces

  • Site, app: every link in prose, as the pages move from the raw class.
  • Extension: the panel’s links to the criterion sheets.

Related

Button.

Decisions

  • 2026-09-24: created from the base layer’s link-underline, which stays for the fifty files that still write it by hand and leaves with the last one.
  • 2026-09-27: link-underline leaves the base layer; the site and the app write this component everywhere.

Criteria held by construction

  • 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
    The underline carries the link and the hover thickens it; the colour only supports both, so the link reads without colour.
  • 6.1, Chaque lien est-il explicite ?
    The text is the name: the component adds nothing to it, so the caller has to write a text that says the destination.

Tokens it reads