Components · Actions
Link
Text that takes the user somewhere else. If pressing it changes the page you are on, it is a link; if it acts on the page you are already on, it is a button.
Figma source: Link ↗Examples
Review the budget summary before submitting.
A link on a dark row can use the black variant.
Inside a table cell, position already signals the target.
<a class="cds-link" href="/budget">budget summary</a>
<a class="cds-link cds-link--black" href="/record">black variant</a>
<a class="cds-link cds-link--bare" href="/row">bare link, underlines on hover</a>States
--link-hover resolves to #44a3db, measuring
2.80:1 on white where 4.5:1 is required. The resting colour measures
11.81:1. Hovering a link currently makes it four times less readable, and the
user cannot avoid triggering it. Re-aliasing link/hover to
blue/400 fixes it. See
the audit.
Figma properties
| Property | Values | Notes |
|---|---|---|
Color | Black · Blue | Blue is the default. Black is for links inside dense data where blue would be noisy — but it must stay underlined. |
Style | Default · Underlined · Hovered · Focused | See the modelling note. |
The variant set offers Default and Underlined as separate styles, which allows a link with no underline at all. In running text that removes the only non-colour signal that the text is a link, failing WCAG SC 1.4.1 Use of Colour for anyone who cannot distinguish the blue from the surrounding black.
This library keeps .cds-link underlined always, and offers
.cds-link--bare only for contexts — nav items, table cells — where
position already identifies the link and it underlines on hover and focus.
Original Figma description & what changed
From Figma: Links are text that can be used as navigational components to send users to different pages.
What changed: Kept the substance, sharpened the boundary against Button (the distinction the original leaves implicit), and added the rule that a link in prose stays underlined. The original is accurate but does not tell a reader when not to reach for a link.
Usage
When to use it
- Use a link to move the user to another view, record or document.
- Use link text that describes the destination, so it makes sense out of context.
- Keep links in running prose underlined.
- Mark links that open a new tab or leave the product, and say so in the text.
When not to use it
- Do not use a link for an action that changes data — deleting, saving, submitting.
- Do not write “click here” or “read more”: screen-reader users often navigate by a list of links, where those read as nothing at all.
- Do not remove the underline in body text.
- Do not open new tabs by default. It takes control of the user’s history away.
Do
- Download the FY24 budget summary (PDF, 240KB)
- See how F&A rates are applied
Don’t
- Download the budget summary here
- For F&A rates, click here
Accessibility
- Use
<a href>. A link withouthrefis not focusable and is not announced as a link. - State the file type and size in the link text when the target is a download.
- If a link must open a new tab, warn in the text — “(opens in a new tab)” — and set
rel="noopener". - Do not use
titleas the accessible name; it is unreliable on touch and invisible to keyboard users.
Tokens consumed
| Token | Applied to | Resolves to |
|---|---|---|
--link-default | Resting colour | --color-blue-500 → #253272 |
--link-hover | Hover colour | --color-blue-200 → #44a3db ⚠ |
--container-text | Black variant | --color-black → #111111 |
--type-body-* | Typography | 14 / 16 / Regular, underlined |