Add link element

[oliverabrahams]

What does this change?

Adds the Link Element to the design system. It builds off the React Aria Link.

It has the same props as that link with one additional one for the typography variant, defaulting to body-sm

How has this change been tested?

It has been used in storybook but has not been dogfooded anywhere.

How can we measure success?

This component gets used in the upcoming migration of the Newsletters tool.

Have we considered potential risks?

Low risk, It is mostly just a few styles on top of the ReactAria Link

Link

A text link for navigation.

When to use

• To navigate to another page, route or destination
• When you need link semantics with keyboard and screen reader support

Links with an href will be handled by the browser, or via a client side router.
Links without an href will be rendered as a <span role="link"> instead of an <a>.
Use the onPress event to handle user interaction. If the intent is to trigger an action (not navigation), use the button component.

Example usage

import { Link } from '@guardian/stand/link';

/* types, if required */
import type { LinkProps, LinkTheme } from '@guardian/stand/link';

<Link>Hello</Link>;

Props

Name	Type	Required	Default	Description
children	React.ReactNode	No	N/A	Content to render inside the component.
href	string	No	N/A	Link destination URL.
theme	LinkTheme	No	N/A	Custom theme overrides.
cssOverrides	SerializedStyles	No	N/A	Custom CSS styles.
className	string	No	N/A	Additional class name(s).
isDisabled	boolean	No	false	Disables interaction and applies disabled styling to the link.
typography	TypographyVariant	No	body-sm	Typography variant to apply to the link text.
...props	Omit<RACLinkProps, 'children'>	No	N/A	All additional props supported by react-aria-components Link.

Accessibility

• Tested with screen reader
• Navigable with keyboard
• Colour contrast passed
• The change doesn't use only colour to convey meaning

[github-actions]

Note

The following canaries were published to NPM:

• @guardian/stand@0.0.0-canary-20260428102102

🐥

[github-actions]

Note

The following canaries were published to NPM:

• @guardian/stand@0.0.0-canary-20260428102147

🐥

[github-actions]

Note

The following canaries were published to NPM:

• @guardian/stand@0.0.0-canary-20260428102418

🐥

[github-actions]

Dependency Compatibility Matrix

React	Emotion	TypeScript	RAC	Typecheck	Unit	E2E	Build	Overall
17	11.11.4	~5.0	1.13.0	ok	ok	ok	ok	✅
17	11.11.4	~5.0	1.17.0	ok	ok	ok	ok	✅
17	11.11.4	~5.1	1.13.0	ok	ok	ok	ok	✅
17	11.11.4	~5.1	1.17.0	ok	ok	ok	ok	✅
17	11.11.4	~5.9	1.13.0	ok	ok	ok	ok	✅
17	11.11.4	~5.9	1.17.0	ok	ok	ok	ok	✅
17	11.14.0	~5.0	1.13.0	ok	ok	ok	ok	✅
17	11.14.0	~5.0	1.17.0	ok	ok	ok	ok	✅
17	11.14.0	~5.1	1.13.0	ok	ok	ok	ok	✅
17	11.14.0	~5.1	1.17.0	ok	ok	ok	ok	✅
17	11.14.0	~5.9	1.13.0	ok	ok	ok	ok	✅
17	11.14.0	~5.9	1.17.0	ok	ok	ok	ok	✅
18	11.11.4	~5.0	1.13.0	ok	ok	ok	ok	✅
18	11.11.4	~5.0	1.17.0	ok	ok	ok	ok	✅
18	11.11.4	~5.1	1.13.0	ok	ok	ok	ok	✅
18	11.11.4	~5.1	1.17.0	ok	ok	ok	ok	✅
18	11.11.4	~5.9	1.13.0	ok	ok	ok	ok	✅
18	11.11.4	~5.9	1.17.0	ok	ok	ok	ok	✅
18	11.14.0	~5.0	1.13.0	ok	ok	ok	ok	✅
18	11.14.0	~5.0	1.17.0	ok	ok	ok	ok	✅
18	11.14.0	~5.1	1.13.0	ok	ok	ok	ok	✅
18	11.14.0	~5.1	1.17.0	ok	ok	ok	ok	✅
18	11.14.0	~5.9	1.13.0	ok	ok	ok	ok	✅
18	11.14.0	~5.9	1.17.0	ok	ok	ok	ok	✅
19	11.14.0	~5.0	1.13.0	ok	ok	ok	ok	✅
19	11.14.0	~5.0	1.17.0	ok	ok	ok	ok	✅
19	11.14.0	~5.1	1.13.0	ok	ok	ok	ok	✅
19	11.14.0	~5.1	1.17.0	ok	ok	ok	ok	✅
19	11.14.0	~5.9	1.13.0	ok	ok	ok	ok	✅
19	11.14.0	~5.9	1.17.0	ok	ok	ok	ok	✅

Columns show granular outcomes for each dependency set: ok = passed, fail = failed, skip = upstream failure prevented running later stages. Overall: ✅ all passed, ⚠️ only skips (no hard fails), ❌ at least one fail.
Last updated: 2026-04-28T13:06:19.175Z (commit a764174)

[github-actions]

Note

The following canaries were published to NPM:

• @guardian/stand@0.0.0-canary-20260428130325

🐥