Link

import { Link } from '@contour-ui/react';

<Link href="/docs/guide">Guide</Link>;

A Link takes the font of the text around it. plain, the default, is underlined on hover only: use it for standalone links. In running text, use underline, so links do not stand out by color alone:

Navigation lists

In a list where every item is a link, such as the navigation of a site header, an index or a footer, use neutral: muted text that turns to the default text color on hover, never underlined. The list, not the color, tells these links from text, so keep them out of running text:

<nav aria-label="Main">
  <ul>
    <li>
      <Link variant="neutral" href="/docs/guide">
        Guide
      </Link>
    </li>
    …
  </ul>
</nav>

Router links

With asChild, Link renders your router's link instead of its own <a>, with the Link class and attributes merged into it:

import { Link } from '@contour-ui/react';
import { Link as RouterLink } from 'react-router';

<Link asChild variant="underline">
  <RouterLink to="/docs/guide">Guide</RouterLink>
</Link>;

External links

Link adds nothing to a link that leaves your site: no target, no rel, no icon. Set what you need yourself:

<Link href="https://github.com/contour-ui/contour-ui" target="_blank" rel="noreferrer">
  GitHub
</Link>

Anatomy

Link accepts every a prop; className is merged with contour-link.

Props

Keyboard

Accessibility

• Give every Link an href: without one, <a> is not a link, so it cannot be focused and is not announced as a link. For an action, use a button.
• In running text, use variant="underline": color alone must not be the only way to tell a link from the text around it (WCAG 1.4.1, Use of Color).
• Keep variant="neutral" to lists of navigation links. In running text, a neutral link differs from the words around it by a shade of gray alone, which fails WCAG 1.4.1.
• With target="_blank", say that the link opens a new tab, in its text or with a labeled icon.

Tokens

plain and underline links are in --ct-color-accent-fg, text and underline. The underline is --ct-border-width-default thick; on hover, an underline link's underline doubles with a --ct-motion-feedback transition. A neutral link is in --ct-color-fg-muted, and in --ct-color-fg-default on hover, with a --ct-motion-feedback transition that stays under prefers-reduced-motion, since nothing moves. The focus ring of every variant is --ct-border-width-focus wide in --ct-color-border-focus, offset by the same width, with --ct-radius-control corners.