Text Link

Overview

Text links are used to link to pages or anchor points, they are not used to perform an action. Add an icon to inform users if the link opens in a new window.

Usage

Edit live code

Accessibility

• Always use the primary color for text links
• Always add an underline to improve the contrast

Variations

Opens in new window

Opens the link in a new window and adds an icon to alert the user that this will happen.

Edit live code

Using React Router

If you are using react router for internal linking pass Link from react-router-dom to the as property which will change the underlying element.

import { StaticRouter, Link } from 'react-router-dom';

const Example = () => (
  <StaticRouter>
    <TextLink to="/" as={Link}>
      Home
    </TextLink>
  </StaticRouter>
);
import { StaticRouter, Link } from 'react-router-dom';

const Example = () => (
  <StaticRouter>
    <TextLink to="/" as={Link}>
      Home
    </TextLink>
  </StaticRouter>
);

Properties

Tokens

Theme tokens