Link

Text that takes someone somewhere else. A link goes somewhere; a button does something.

In a sentence

The common case, and the one to reach for. An inline link carries no size of its own, so it is the size of the sentence around it and wraps with it.

The record was last updated by another care team. Open the full audit history to see who changed what, and when.

<!-- Inline in a sentence: no size class, so it matches the paragraph. -->
<p>Open the <a class="sr-link" href="/audit">full audit history</a> to see who changed what.</p>

<!-- Standalone, with a decorative leading icon. -->
<a class="sr-link sr-link--lg sr-link--icon" href="/summary.pdf">
  <span class="sr-link__icon" aria-hidden="true"><!-- icon --></span>
  <span>Download the discharge summary</span>
</a>

<!-- New tab: say so in the text, not with the icon. -->
<a class="sr-link" href="https://wcp" target="_blank" rel="noopener noreferrer">
  Open in Welsh Clinical Portal (opens in a new tab)
</a>

Standalone, at three sizes

For a link that is the whole line: a card footer, a table cell, a footnote. Large is body copy, Default suits dense areas, Small is for metadata.

Patient summary Patient summary Patient summary

<!-- Inline in a sentence: no size class, so it matches the paragraph. -->
<p>Open the <a class="sr-link" href="/audit">full audit history</a> to see who changed what.</p>

<!-- Standalone, with a decorative leading icon. -->
<a class="sr-link sr-link--lg sr-link--icon" href="/summary.pdf">
  <span class="sr-link__icon" aria-hidden="true"><!-- icon --></span>
  <span>Download the discharge summary</span>
</a>

<!-- New tab: say so in the text, not with the icon. -->
<a class="sr-link" href="https://wcp" target="_blank" rel="noopener noreferrer">
  Open in Welsh Clinical Portal (opens in a new tab)
</a>

A leading icon, and new tabs

The icon is decorative and hidden from assistive technology, so it can never be the only thing saying what happens. That is why "opens in a new tab" is written out rather than drawn — someone who cannot see the tab bar change has been given no warning otherwise.

Download the discharge summary Open in Welsh Clinical Portal (opens in a new tab)

<!-- Inline in a sentence: no size class, so it matches the paragraph. -->
<p>Open the <a class="sr-link" href="/audit">full audit history</a> to see who changed what.</p>

<!-- Standalone, with a decorative leading icon. -->
<a class="sr-link sr-link--lg sr-link--icon" href="/summary.pdf">
  <span class="sr-link__icon" aria-hidden="true"><!-- icon --></span>
  <span>Download the discharge summary</span>
</a>

<!-- New tab: say so in the text, not with the icon. -->
<a class="sr-link" href="https://wcp" target="_blank" rel="noopener noreferrer">
  Open in Welsh Clinical Portal (opens in a new tab)
</a>

Hover thickens the underline

Hover over any link above. The underline goes from 1px to 3px and the colour does not move.

The Figma set changes hue on hover instead. That colour is a dark navy, which reads at 1.47:1 on the dark page — invisible. No token in the system darkens in light mode and lightens in dark, so hover cannot be a colour change until one exists. Thickening the underline is the GDS treatment and works in both modes today.

Destructive, and disabled

A destructive link opens a flow that removes something. It never performs the act itself — pair it with a confirmation step.

It is light-mode only for now. The destructive red is a fill colour, the sort white text sits on, and as text on the dark page it reads at 2.84:1 against the 4.5:1 it needs. The contrast check records it as an open finding with the two ways out.

A disabled link is usually the wrong pattern. It carries no href, so the browser leaves it out of the tab order. Prefer removing the link and leaving plain text.

Remove this patient from the list Patient summary

<!-- Inline in a sentence: no size class, so it matches the paragraph. -->
<p>Open the <a class="sr-link" href="/audit">full audit history</a> to see who changed what.</p>

<!-- Standalone, with a decorative leading icon. -->
<a class="sr-link sr-link--lg sr-link--icon" href="/summary.pdf">
  <span class="sr-link__icon" aria-hidden="true"><!-- icon --></span>
  <span>Download the discharge summary</span>
</a>

<!-- New tab: say so in the text, not with the icon. -->
<a class="sr-link" href="https://wcp" target="_blank" rel="noopener noreferrer">
  Open in Welsh Clinical Portal (opens in a new tab)
</a>

It is not a button

If it changes state rather than location — saving, deleting, opening a dialog — it is a Button. A screen reader announces "link" and promises navigation. A user told they are about to navigate, who instead deletes a record, was misled by the markup rather than by the label.

Text that takes someone somewhere else, another page, a document, a place further down the one they are on.

When to use

Moving to another page, screen or record.
Opening a document, a report, or a system outside Single Record.
Jumping to a place further down the same page.
Anywhere the address bar should change as a result.

When not to use

Anything that changes state. Saving, submitting, deleting, opening a modal, toggling a panel. Use a Button. A screen reader announces "link", and a user who is told they are about to navigate and instead deletes a record has been misled by the markup.
A row that is entirely clickable. A whole table row or card that opens a record is not a link with a big hit area; put the link on the text that names the thing, so the accessible name says what will open.
Navigation between the main areas of the product. That is the Navigation component, which also carries the current-page state.
A back step in a flow. Use Breadcrumbs, or the back link the flow already provides.

How it works

Underlined, always. The underline is what identifies a link when the colour cannot be seen. It is never removed, including on focus.
Hover thickens the underline; the colour does not change. Figma changes hue on hover, but the hover colour is a dark navy that reads at 1.47:1 on the dark page. Thickening is GDS's own treatment and works in both modes.
An inline link takes the size of the sentence it sits in. The three sizes are for standalone links, where the link is the whole line.
The leading icon is decorative. It never carries meaning the label does not already carry, so "opens in a new tab" is written, not drawn.
Focus is a 2px ring drawn outside the text, the same ring every other interactive component in the system uses.

Options

Size	Type	Use when
Inherit (default)	Body copy	A link inside a sentence. Matches the surrounding text
Large	Body M, 16/24	A standalone link at the size of body copy
Default	Body S, 14/20	A standalone link in a dense area, a table cell, a card footer
Small	Caption, 12/16	Metadata and footnotes

Type

Type	Use when
Default	Everything
Destructive	The link opens a flow that removes something. Pair with a confirmation step, the link opens the flow, it does not perform the act. Light mode only until the colour question below is settled

Do & don't

Do	Don't
Name the destination, "Patient summary"	Write "Click here", "More", "Read more"
Say "opens in a new tab" in the text	Rely on an icon to say it
Keep the underline	Remove it and leave colour as the only cue
Use a Button for anything that changes state	Style a button as a link to make it look quieter
Let a long link wrap with its sentence	Put an inline link in a flex container

Accessibility

The link text is the accessible name, so it must make sense read on its own. Screen-reader users list the links on a page; "read more" nine times is a list of nine identical entries.
A link that opens a new tab says so in its visible text. The behaviour is a surprise otherwise, and a surprise is worse for someone who cannot see the tab bar change.
Focus is a 2px Border/Focus ring at a 2px offset, drawn outside the text so it is never clipped and never moves the line.
The underline survives every state. Colour is the second signal, not the first (SC 1.4.1).
Target size. A link inside a block of text is exempt from SC 2.5.8. A standalone link is not, and the line boxes alone are 24, 20 and 16px, two of the three under the 24px minimum. Each size therefore carries 4px of vertical padding, which grows the hit area without moving the line. Touch layouts should give more than the minimum.
A disabled link keeps no href, so it leaves the tab order the way the browser intends. Prefer removing the link and leaving plain text.

Content

Sentence case. No full stop unless the link ends a sentence.
Front-load the distinguishing word: "Blood results" not "View the blood results".
Do not stack three or more links in a row. That is a list or a navigation pattern.

Known gaps

No hover colour that works in both modes. Hover thickens the underline instead. A semantic interactive/link-hover would let the colour move; colour changes need sign-off.
Destructive is light-mode only. interactive/destructive is a fill colour and sits at 2.84:1 as text on the dark page. Recorded as an open finding in scripts/check-contrast.mjs with the two options.
No visited state. There is no token for it, and browsers apply their own on the web until there is.
The Figma set draws Type=Destructive, Size=Large in Heading XS while Type=Default, Size=Large is Body M, same size, different weight, for no stated reason. Code uses Body M for both.
No Blazor or MAUI implementation yet.

Button, for actions
Breadcrumbs, for going back up
Navigation, for moving between product areas