Link

Playground

<Link href="#">Let's go!</Link>

<a class="link" href="#">Let's go!</a>

Skins

CTA

CTA links are specifically for Calls To Action. They are only to be used in particular locations such as tiles and heroes!

<>
  <div>
    <Link href="#" skin="cta">
      CTA link
    </Link>
  </div>
  <div>
    <Link href="#" skin="cta-left">
      CTA link using "cta-left" skin
    </Link>
  </div>

  <Box backgroundColor="dark-blue" p="4" mt="3">
    <Typography textColor="white">
      Inside a block of <a href="typography">Typography</a> that sets the text
      color to white, the CTA link automatically changes its icon to white:
      <p>
        <Link href="#" skin="cta">
          A link with the "CTA" skin on it
        </Link>
      </p>
    </Typography>
  </Box>
</>

<>
  <Link href="#" skin="cta">
    CTA link
  </Link>

  <Link href="#" skin="cta-left">
    CTA link using "cta-left" skin
  </Link>
</>

<a href="someurl" class="link link-skin-cta">CTA link</a>

<a href="someurl" class="link link-skin-cta-left"
  >CTA link using "cta-left" skin</a
>

unstyled

A link with the "unstyled" skin won't show up with normal link styling, although it still gets the "pointer" cursor if you hover over it. This link is intended only for use directly around product tiles and other elements that provide their own affordance!

<Link href="#" skin="unstyled">
  Unstyled link
</Link>

<a class="link" href="#">Unstyled link</a>

Link with icon

The "link with icon" feature is a link that has both text and an image or icon, and vertically centers both sub-elements.

<Link withIcon href="someurl">
  <ControlIcon iconType="arrow-l" />
  <span>Text in span</span>
</Link>

<a href="someurl" class="link-with-icon">
  // an image or Control Icon component goes either before or after the text
  <span>Link text</span>
</a>

Removing link styling

If a component is a link (e.g. using the as="a" prop in React), but you don't want the underlining or other visual styling that a link applies to its contents, you can use the "remove link styling" feature. This is useful if, say, a Standard Tile is itself a link, and you don't want the tile's contents to have the underlining on the text.

In React, put the removeLinkStyles prop onto any component. In the vanilla API, add the CSS class remove-link.

Semantics

If your "link" does not actually perform a navigation when clicked, you should not use an <a> tag for it!

• In React, use the component prop on a Link component to make it render a <button> tag rather than the <a> that is rendered by default.

• In vanilla, use a <button> tag with class "link" to make that button look like a link.

<Link component="button" onClick={() => alert('Clicked a button!')}>
  Perform a non-navigation action
</Link>

<button class="link">Perform a non-navigation action</button>

Components

Guidelines

Do

• Keep the link copy clear and simple -- two or three words are recommended. The fewer words, the better, to avoid text wrapping.

• Use language that leads users to the next step.

• Use links in body copy and legal copy.

Don't

• Change the styling and type size for links.

Designer Guidelines

• Since "unstyled" links provide no affordance, they are intended only for use around other components that already provide their own affordance and hover styling, such as Standard Tiles.

SEO Considerations

• Any link to another internal page must be part of the page's source HTML (not dynamically added via JavaScript) for search engines to index it.

• Add the rel="nofollow" attribute to internal links that are pointing to a page that should not be crawled by search engine bots.