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

Design Develop Accessibility

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

1. 1 Label
2. 2 Icon

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

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

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

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

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.

On this page

On this page

• Anatomy
• When to use it
• Properties
• Platform considerations
• Best practices
• Content guidelines

Styles

<a class="tng-link">Default</a>
<a class="tng-link is-neutral">Neutral</a>

Default

Default Neutral

Contrast

Default Neutral

Variants

Links support variants for customized color and styling.

Sizes

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>

Default

This is body text with a link in it.

Contrast

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>

Default

Small Medium (default) Large

Contrast

Small Medium (default) Large

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>

Default

External Link Continue

Contrast

External Link Continue

React

Note

Design decisions are still under discussion. The component may change based on the outcome of the review.

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

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

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 };

On this page

On this page

• Styles
  • Variants
  • Sizes
  • With icons
• React
  • Description
  • Component
    • Properties
    • Example

For designers

Links are among the most common interactive elements, yet they can easily become accessibility barriers if not designed or coded properly. This section summarises the key guidelines to ensure every link is perceivable, operable, and understandable across devices and assistive technologies.

To ensure that links meet accessibility standards across platforms, please follow this implementation checklist. These recommendations align with WCAG 2.1 AA and EN 301 549, supporting keyboard navigation, screen readers, and assistive technology.

Screen reader support

• Use semantic <a> elements for all links.
• Every link must have a descriptive text label that clearly indicates its destination or purpose.
• For icon-only links, include a descriptive aria-label.
• For external links, add aria-label="Opens in a new tab" or similar.
• Avoid using duplicate or generic labels such as “Learn more” multiple times on the same page.

Keyboard navigation

• Links must be focusable via Tab and activable with Enter/Return.
• Maintain a visible focus state at all times.
• Ensure consistent focus order following the visual reading order.

Motion sensitivity and feedback

• Avoid using motion or animated effects that trigger on hover or focus.
• Respect system preferences for reduced motion (prefers-reduced-motion).

ARIA and markup

• Use role="link" only when a semantic <a> element is not available.
• Never use <div> or <span> elements styled as links.
• Ensure external links open safely (e.g. rel="noopener noreferrer" when target="_blank").

Testing and validation

• All links must be verified through automated accessibility tests (e.g. Axe, Lighthouse) before release.

For developers

Link vs button

Links navigate to a new page or resource. Buttons perform an action. Don’t put href="#" on a link to make it act as a button — use <button> instead. Screen readers announce links and buttons differently, and users have different keyboard expectations for each.

Meaningful link text

Avoid generic text like “click here” or “read more”. Link text should describe the destination so it makes sense out of context (e.g. in a screen reader’s links list).

External links

When a link opens a new window or tab (target="_blank"):

• Add rel="noopener" for security.
• Indicate the behaviour to screen readers, for example <span class="sr-only">(opens in new tab)</span>.

Icons

• Mark decorative icons with aria-hidden="true" (already shown in the examples above).
• If the icon is the only content in a link, add aria-label on the <a> element to provide an accessible name.

Minimum touch area

To ensure accessibility and ease of interaction across devices, all interactive elements — including links — must respect a minimum touch target size.

Absolute minimum: 24 × 24 px — This is the lowest technical requirement referenced in accessibility documentation. It ensures that the link can still be reached, but does not guarantee an optimal experience for all users.

Recommended best practice: 44 × 44 px — This follows WCAG 2.5.5 Target Size (Level AA) and EN 301 549 guidance. Provides a more comfortable interaction area for users with motor difficulties, touch devices, or when using a device outdoors. Should be considered the default requirement in our design system.

The minimum target size applies regardless of the visual size of the component. If the visual element is smaller, additional spacing or invisible padding must be added to meet the requirement. Consistency is key: the same rule applies across all sizes (LG, MD, SM).

Touch area Do’s and Don’ts

Do

Add invisible padding around links when needed to expand the touch target (without altering the visual appearance), and ensure links remain usable and clearly tappable in responsive layouts and mobile contexts.

Don't

Don’t rely solely on the visible text size to define the touch area, don’t define touch areas smaller than the minimum (even for inline links), and avoid placing multiple inline links too close together — overlapping touch areas hinder accessibility.

Content / Copy Guidelines

• Keep to 1–3 words when possible.
• Avoid vague phrases like “Click here”.
• Be concise and descriptive (e.g. “Learn more”, “View details”).
• Keep link text under 24–30 characters for consistency across translations.
• Use plain English and neutral phrasing to make localisation easier.
• Text should wrap naturally rather than truncate, to preserve meaning and accessibility. Character limits (24–30 in English) are guidance, not strict enforcement.

On this page

On this page

• For designers
  • Screen reader support
  • Keyboard navigation
  • Motion sensitivity and feedback
  • ARIA and markup
  • Testing and validation
• For developers
  • Link vs button
  • Meaningful link text
  • External links
  • Icons
  • Minimum touch area
  • Touch area Do’s and Don’ts
  • Content / Copy Guidelines