Design

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)

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

• 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

Type : Inline by State

Neutral

Link Button

Width: 55

Border radius: 0

Label

Text color:

buttons-link-button-neutral-foreground-color#000000

buttons-link-button-neutral-foreground-color#282830

Rested

Label

Text color:

buttons-link-button-neutral-rested-foreground-color#00244d

buttons-link-button-neutral-rested-foreground-color#0072f0

Hover

Label

Text color:

buttons-link-button-neutral-hover-foreground-color#001a38

buttons-link-button-neutral-hover-foreground-color#001874

Active

Label

Text color:

buttons-link-button-neutral-selected-foreground-color#4d4d4d

buttons-link-button-neutral-selected-foreground-color#001874

Visited

Label

Text color:

buttons-link-button-neutral-visited-foreground-color#00244d

buttons-link-button-neutral-visited-foreground-color#001874

Focus

Link Button

Border color:

color-border-focus-neutral-default#c57046

color-border-focus-neutral-default#0072f0

Width: 63

Border weight: 2

Border radius: 2

Type : Standalone by State

Neutral

Label

Text color:

buttons-link-button-neutral-foreground-color#000000

buttons-link-button-neutral-foreground-color#282830

Rested

Label

Text color:

buttons-link-button-neutral-rested-foreground-color#00244d

buttons-link-button-neutral-rested-foreground-color#0072f0

Hover

Label

Text color:

buttons-link-button-neutral-hover-foreground-color#001a38

buttons-link-button-neutral-hover-foreground-color#001874

Active

Label

Text color:

buttons-link-button-neutral-selected-foreground-color#4d4d4d

buttons-link-button-neutral-selected-foreground-color#001874

Visited

Label

Text color:

buttons-link-button-neutral-visited-foreground-color#00244d

buttons-link-button-neutral-visited-foreground-color#001874

Focus

Link Button

Border color:

color-border-focus-neutral-default#c57046

color-border-focus-neutral-default#0072f0

Size

We 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

False

Label

Text color:

buttons-link-button-neutral-foreground-color#000000

buttons-link-button-neutral-foreground-color#282830

True

Label

Text color:

buttons-link-button-contrast-foreground-color#ffffff

buttons-link-button-contrast-foreground-color#ffffff

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.

Modes

Toyota

Label

Text color:

buttons-link-button-neutral-foreground-color#000000

buttons-link-button-neutral-foreground-color#282830

Lexus

Label

Text color:

buttons-link-button-neutral-foreground-color#000000

buttons-link-button-neutral-foreground-color#282830

Layout and Spacing

Type: Inline, State: Neutral

Link Button

Direction: Horizontal

Alignment: Middle left

Vertical resizing: Hug

Horizontal resizing: Fixed

Item spacing: 4

container

Direction: Horizontal

Alignment: Middle left

Vertical resizing: Hug

Horizontal resizing: Hug

Item spacing: 4

Styling

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

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)

Usage

Do

Guidance on how to use a component.

• Keep link text scannable and contextual.
• Use links for navigation, not for form submissions or in-page actions.
• Always indicate when a link opens in a new tab or takes the user to an external site.

Don’t

Guidance on what to avoid when using a component.

• Avoid generic link text like “click here” or “read more”.
• Don’t use links to trigger JavaScript actions — use buttons instead.
• Avoid removing focus indicators or changing them in ways that make links difficult to identify.