Link
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.
This component supports two types: Inline (embedded within running text) and Standalone (used independently as a navigational element). Both types are fully responsive across mobile, tablet, and desktop viewports.
When to use it (and when not to)
Section titled “When to use it (and when not to)”Use a Link when the action takes the user to another page, section, or external resource. Links are intended for inline or rich text contexts (for example, within editorial or CMS-managed content).
For interactive or transactional actions (e.g. submit, save, confirm), use the main Button component instead. Avoid using Links for CTAs or actions that trigger in-page changes.
The default icon is an example: it can be replaced with any icon from the shared iconography library, as long as accessibility and balance are maintained. Avoid mixing Buttons and Links within the same action group to preserve clarity and hierarchy.
Quick summary of accessibility & consistency
Section titled “Quick summary of accessibility & consistency”- Inline links inherit typography from their parent text but remain visually distinguishable through colour and underline.
- Standalone links use predefined sizes and ensure a 24–44 px minimum touch target.
- Meets WCAG 2.1 AA: sufficient contrast and visible focus.
- Minimum touch target: 24×24 px (recommended 44×44 px).
- All links are built in SVG + text, tokenised for foreground and focus states.
- Decorative icons must be marked with
aria-hidden="true".
Properties
Section titled “Properties”Type : Inline by State
Section titled “Type : Inline by State”Neutral
buttons-link-button-neutral-foreground-color#000000buttons-link-button-neutral-foreground-color#282830Rested
buttons-link-button-neutral-rested-foreground-color#00244dbuttons-link-button-neutral-rested-foreground-color#0072f0Hover
buttons-link-button-neutral-hover-foreground-color#001a38buttons-link-button-neutral-hover-foreground-color#001874Active
buttons-link-button-neutral-selected-foreground-color#4d4d4dbuttons-link-button-neutral-selected-foreground-color#001874Visited
buttons-link-button-neutral-visited-foreground-color#00244dbuttons-link-button-neutral-visited-foreground-color#001874Focus
color-border-focus-neutral-default#0072f0color-border-focus-neutral-default#0072f0Type : Standalone by State
Section titled “Type : Standalone by State”Neutral
buttons-link-button-neutral-foreground-color#000000buttons-link-button-neutral-foreground-color#282830Rested
buttons-link-button-neutral-rested-foreground-color#00244dbuttons-link-button-neutral-rested-foreground-color#0072f0Hover
buttons-link-button-neutral-hover-foreground-color#001a38buttons-link-button-neutral-hover-foreground-color#001874Active
buttons-link-button-neutral-selected-foreground-color#4d4d4dbuttons-link-button-neutral-selected-foreground-color#001874Visited
buttons-link-button-neutral-visited-foreground-color#00244dbuttons-link-button-neutral-visited-foreground-color#001874Focus
color-border-focus-neutral-default#0072f0color-border-focus-neutral-default#0072f0We define three text sizes for this component: Large (LG), Medium (MD) and Small (SM). Each size adapts to the visual hierarchy and the context of use across the system.
Large (LG) — Default for standalone links (e.g. end of cards, modals, or sections). Use when the link acts as a main navigational or call-to-action element.
Medium (MD) — Used in compact layouts or side panels, where space is limited but the link still needs prominence.
Small (SM) — Used for inline links within text, captions or metadata. It inherits the parent text size to maintain reading flow and hierarchy. Avoid using SM as a standalone default.
When used inline, the link inherits the text style of the paragraph but preserves its interaction and colour tokens. Standalone links always use the predefined typographic token (LG by default) and have internal padding to meet touch-target requirements (min. 24×24 px; recommended 44×44 px). Line height and spacing must ensure the clickable area is accessible on both desktop and mobile devices.
Contrast
Section titled “Contrast”False
buttons-link-button-neutral-foreground-color#000000buttons-link-button-neutral-foreground-color#282830True
buttons-link-button-contrast-foreground-color#ffffffbuttons-link-button-contrast-foreground-color#ffffffHas Icon
Section titled “Has Icon”A boolean property that controls whether the link displays an icon alongside the label. Default value is true. The icon element depends on the Link sub-component.
Toyota
buttons-link-button-neutral-foreground-color#000000buttons-link-button-neutral-foreground-color#282830Lexus
buttons-link-button-neutral-foreground-color#000000buttons-link-button-neutral-foreground-color#282830Layout and Spacing
Section titled “Layout and Spacing”Type: Inline, State: Neutral
Styling
Section titled “Styling”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
buttons-link-button-neutral-foreground-color | Text color | Label |
buttons-link-button-neutral-foreground-color | Text color | Label |
buttons-link-button-neutral-rested-foreground-color | Text color | Label |
buttons-link-button-neutral-rested-foreground-color | Text color | Label |
buttons-link-button-neutral-hover-foreground-color | Text color | Label |
buttons-link-button-neutral-hover-foreground-color | Text color | Label |
buttons-link-button-neutral-selected-foreground-color | Text color | Label |
buttons-link-button-neutral-selected-foreground-color | Text color | Label |
buttons-link-button-neutral-visited-foreground-color | Text color | Label |
buttons-link-button-neutral-visited-foreground-color | Text color | Label |
buttons-link-button-contrast-foreground-color | Text color | Label |
buttons-link-button-contrast-foreground-color | Text color | Label |
buttons-link-button-contrast-rested-foreground-color | Text color | Label |
buttons-link-button-contrast-rested-foreground-color | Text color | Label |
buttons-link-button-contrast-hover-foreground-color | Text color | Label |
buttons-link-button-contrast-hover-foreground-color | Text color | Label |
buttons-link-button-contrast-selected-foreground-color | Text color | Label |
buttons-link-button-contrast-selected-foreground-color | Text color | Label |
buttons-link-button-contrast-visited-foreground-color | Text color | Label |
buttons-link-button-contrast-visited-foreground-color | Text color | Label |
color-border-focus-neutral-default | Border color | Link Button (focus) |
color-border-focus-neutral-default | Border color | Link Button (focus) |
Text Styles
Section titled “Text Styles”| Name | Applied as | Applied to |
|---|---|---|
Lorem Ipsum
buttons-link-button-lg-font-size | Text style | Label (Large) |
Lorem Ipsum
buttons-link-button-lg-font-size | Text style | Label (Large) |
Lorem Ipsum
buttons-link-button-md-font-size | Text style | Label (Medium) |
Lorem Ipsum
buttons-link-button-md-font-size | Text style | Label (Medium) |
Lorem Ipsum
buttons-link-button-sm-font-size | Text style | Label (Small) |
Lorem Ipsum
buttons-link-button-sm-font-size | Text style | Label (Small) |
Accessibility
Section titled “Accessibility”For Design
Section titled “For Design”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
Section titled “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
Section titled “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
Section titled “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
Section titled “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"whentarget="_blank").
Testing and validation
Section titled “Testing and validation”- All links must be verified through automated accessibility tests (e.g. Axe, Lighthouse) before release.
Minimum touch area
Section titled “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
Section titled “Touch area Do’s and Don’ts”- Add invisible padding around links when needed to expand the touch target (without altering the visual appearance).
- Ensure links remain usable and clearly tappable in responsive layouts and mobile contexts.
- Do not rely solely on the visible text size to define the touch area.
- Do not define touch areas smaller than the minimum, even for inline links.
- Avoid placing multiple inline links too close together, as overlapping touch areas may hinder accessibility.
Content / Copy Guidelines
Section titled “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.