Link
Links are interactive text elements that can be used to navigate users to other pages or resources or perform actions as a button.
Ready to use
Links allow users to navigate between pages, sections, or external resources while remaining visually distinguishable within content. They are used for actions that change context rather than trigger in-page processes. The component supports two types — Inline (embedded within running text) and Standalone (used independently as a navigational element) — and is fully responsive across all viewports.
Anatomy
Section titled “Anatomy”- Link
- Label
- Icon
When to use it
Section titled “When to use it”Use a Link when:
- The action takes the user to another page, section, or external resource.
- The placement is inline or rich text (within editorial or CMS-managed content).
- A lightweight navigational element fits better than a button.
Avoid a Link when:
- The action is interactive or transactional (submit, save, confirm) — use the main Button instead.
- The action triggers an in-page change — buttons are the right primitive.
- Mixing Buttons and Links inside the same action group would muddy hierarchy.
Properties
Section titled “Properties”Type
Two types: Inline is embedded inside running text and inherits the surrounding typography; Standalone is used independently as a navigational element and ships with predefined size and padding tokens.
State
Neutral, Rested, Hover, Active, Visited, and Focus. Focus uses a 2 px outline so the link stays reachable from the keyboard even when it shares typography with surrounding text.
Size
Three sizes — Large (default for standalone links), Medium (compact layouts and side panels), Small (inline links inside captions or metadata, inheriting parent text size). Inline links always inherit the paragraph’s text style; standalone links use the predefined typographic token.
Contrast
A boolean that flips the link’s colour set for use over dark imagery or high-contrast surfaces. Pair it with the contrast scheme on the surrounding container so the visited and rested colours stay coherent.
Icon
Optional leading or trailing icon. Default true on standalone links to signal direction (chevron right for “Discover”, external link for “Open in new tab”). Decorative icons must be marked aria-hidden="true".
Platform considerations
Section titled “Platform considerations”Desktop
Inline links remain visually distinguishable through colour and underline while inheriting the paragraph typography. Standalone links carry internal padding so the touch target meets the 24×24 minimum even at the large size.
Tablet
Same behaviour as desktop — touch and pointer both work. Keep the recommended 44×44 px tap area in mind when packing several standalone links together.
Mobile
Lean on the standalone variant for any navigational element that isn’t sitting inside running text. The inherited inline size shouldn’t drop below the surrounding paragraph or readers will lose the link entirely.
Best practices
Section titled “Best practices”Treat links as the navigational primitive — anything that changes the page, not the state.
Do
Keep link text scannable and contextual, use links for navigation rather than form submissions or in-page actions, and always indicate when a link opens a new tab or takes the user to an external site.
Don't
Don’t write generic link text like “click here” or “read more”, don’t use links to trigger JavaScript actions (use buttons), and don’t remove or weaken focus indicators in ways that make links hard to identify.
Content guidelines
Section titled “Content guidelines”Make every link describe its destination — “Discover the new Yaris” beats “Click here”, “Download the brochure” beats “Read more”. Use sentence case, skip terminal punctuation, and signal external destinations or new tabs in the label itself so screen-reader users hear the cue even before the announcement. Keep inline links short enough to fit on a single line within their paragraph; standalone links can carry a leading verb to reinforce the action.
Styles
Section titled “Styles”<a class="tng-link">Default</a><a class="tng-link is-neutral">Neutral</a>Variants
Section titled “Variants”Links support variants for customized color and styling.
By default links will size with the font size of their content.
<p class="tng-text-body is-1"> This is body text with a <a class="tng-link">link</a> in it.</p>This is body text with a link in it.
This is body text with a link in it.
Use a size modifiers to set a fixed size.
<a class="tng-link is-sm">Small</a><a class="tng-link is-md">Medium (default)</a><a class="tng-link is-lg">Large</a>With icons
Section titled “With icons”<a class="tng-link"> <i class="tng-icon icon-external-link" aria-hidden="true"></i> <span>External Link</span></a><a class="tng-link"> <span>Continue</span> <i class="tng-icon icon-arrow-right" aria-hidden="true"></i></a>Description
Section titled “Description”The Link component renders an anchor element. Links allow users to navigate between pages or sections while maintaining the visual hierarchy of buttons. They are used for actions that change context rather than trigger in-page processes.
Links are intended for inline or rich text components. Icons can be added but are optional, if the link is external the icon will be replaced by the external-link icon.
Component
Section titled “Component”Properties
Section titled “Properties”The LinkProperties extends <React.HTMLAttributes<HTMLAnchorElement>> which means it includes all standard HTML attributes that can be applied to an anchor element.
| Prop | Type | Description | Required |
|---|---|---|---|
text |
string |
Visible label of the link | ✅ |
opensInNewWindowLabel |
string |
Accessibility label used by screen readers | ✅ |
size |
sm | md | lg |
Defines the size of the Link | |
className |
ClassValue |
Custom classes you want to apply to the anchor | |
icon |
ToyotaIcon | LexusIcon |
Icon name to display from the library | |
isNeutral |
boolean |
Applies a neutral style to reduce the link’s visual emphasis |
Example
Section titled “Example”import { Link } from '@tmedxp/react-components';
const LinkExample = () => { return ( <Link href="https://www.toyota-europe.com" text="Go to Toyota Europe" opensInNewWindowLabel="(opens in a new window)" linksize="md" icon="external-link" isNeutral={false} /> );};
export { LinkExample };A link is a native <a href> that changes context — it follows the WAI-ARIA Link pattern and meets WCAG 2.1 AA. Its accessibility hinges on three things: a descriptive accessible name that makes sense out of context, correct link-vs-button semantics so screen readers announce it as navigation, and a clear, visible focus state — so the destination is understood whether the user reads it, hears it, or tabs to it.
For designers
Section titled “For designers”- Link text and every state — rested, hover, focus, and visited — must maintain accessible contrast on every supported surface, including the contrast variant placed over imagery. Source: WCAG 1.4.3 Contrast (Minimum).
- A link must be distinguishable from the surrounding text by more than colour alone — pair the colour with an underline or another non-colour cue, especially for inline links inside running text. Source: WCAG 1.4.1 Use of Color.
- Focus styles must stay visible, meet contrast requirements on every supported surface, and be clearly distinguishable from hover. Source: WCAG 2.4.7 Focus Visible.
- Use semantic colour tokens (e.g.
foreground/neutral/default) rather than fixed values, so the component adapts correctly across themes and surfaces.
For developers
Section titled “For developers”Build every link as a native <a href> — it carries the link role, keyboard operation (Tab to reach, Enter to activate), and focus for free. Don’t style a <div> or <span> to look like a link, and don’t fake a link with href="#" to run an action: a link navigates, a button acts, and screen readers announce the two differently with different keyboard expectations, so reach for <button> when the job is an in-page action. Reserve role="link" for the rare case where a native <a> genuinely isn’t available.
Link text is the accessible name, so make it describe the destination and stand on its own out of context — in a screen reader’s links list, “click here” and “read more” say nothing. When a link opens a new tab (target="_blank"), pair it with rel="noopener" and announce the new tab in the name. Mark decorative icons aria-hidden="true". Give links a comfortable touch target — a 24×24 px minimum, expanded toward 44×44 px with invisible padding when the visible text is smaller, and never pack inline links so tightly that their targets overlap. Source: WCAG 2.5.8 Target Size (Minimum). Each element’s role, accessible name, and new-tab handling are in the Labelling elements section below.
Labelling elements
Section titled “Labelling elements”Give every element the role, name, and state assistive technology needs.
Link
A native <a href> takes role="link" implicitly — no ARIA needed. Its accessible name is its text content, so keep that text descriptive and unique on the page: two links with identical text but different destinations announce the same in the links list and leave the user guessing.
Icon
Decorative icons carry no meaning for assistive technology — mark them aria-hidden="true" so the link’s name stays its text. When an icon is the link’s only content it isn’t decorative: give the <a> an aria-label describing the destination, since there’s no text to name it.
External / new-tab link
When a link opens a new tab or leaves the site, announce that in the name — a visually hidden (opens in a new tab) appended to the label, or an aria-label that includes it — so screen-reader users aren’t moved without warning. Pair target="_blank" with rel="noopener".
Source: WCAG 4.1.2 Name, Role, Value.