Link

Reference to a resource, either external (a link to a different website) or internal (a link to another page or document).

Figma componentStorybook documentation

Link

React

<Link>Link</Link>

CSS

<a class="link">Link</a>

Props

Component

Use another React component, usually an internal routing Link component such as Link from react-router-dom.

AnchorReact component

React

import { ReactComponent } from 'package'

<Link href="">Anchor</Link>
<Link component={ReactComponent} to="">React component</Link>

CSS

This prop does not apply to a pure HTML and CSS component.

Icon

Link with icon

React

<Link icon={<ArrowRight />}>Link with icon</Link>

CSS

<a class="link">
  Link with icon
  <span class="link_icon">
    <!-- insert icon -->
  </span>
</a>

Color

Overrides the link color. The inherit value means that the link will inherit the parent text colour.

Default

Alt

Disabled

Contrast

Contrast alt

Contrast disabled

Primary

Secondary

Inherit

React

<Link color="default">Default</Link>
<Link color="alt">Alt</Link>
<Link color="disabled">Disabled</Link>

<Link color="contrast">Contrast</Link>
<Link color="contrastAlt">Contrast alt</Link>
<Link color="contrastDisabled">Contrast disabled</Link>

<Link>Primary</Link>
<Link color="secondary">Secondary</Link>

<Link color="inherit">Inherit</Link>

CSS

<a class="link text-default">Default</Link>
<a class="link text-alt">Alt</Link>
<a class="link text-disabled">Disabled</Link>

<a class="link text-contrast">Contrast</Link>
<a class="link text-contrastAlt">Contrast alt</Link>
<a class="link text-contrastDisabled">Contrast disabled</Link>

<a class="link">Primary</Link>
<a class="link text-secondary">Secondary</Link>

<a class="link text-inherit">Inherit</Link>

IsExternal

External link

React

<Link isExternal href="">External link</Link>

CSS

<a href="" target="_blank" rel="noopener noreferrer" class="link">External link</a>