The link component represents a clickable link that has been styled to look like a button.

Overall usage

  • Used to send users to a new URL.
  • Must not be used to trigger form submission or events. In these cases, the button component must be used.


  • The content of the link should be meaningful. The purpose of the link can be determined from the link text alone.
  • The static, focus, hover and active states of the button should be defined
  • There must be a clearly visible focus state, and the focus method should be consistent across all focusable elements.


Used to display a link with the same dimensions as a button.

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


Used to display a link in the style of a primary button.

<a href="#" class="link--primary">link--primary</a>


Used to display a link in the style of a secondary button.

<a href="#" class="link--secondary">link--secondary</a>