Develop

Styles

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

Default
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
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
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
Contrast

External Link Continue

React

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