Skip to content
search icon
clear
Component Status

Links are primarily used as interactive navigational elements, though they can also change how data is viewed.

Guidelines

Links can be used on their own in body text, ordered lists or unordered lists, but always as text.

Link vs button

A button is used when performing an action. Actions are almost always on the same page. A link is used when navigating to another place. If the action will change the data, use a button.

Don't

  • Links are not for actions such as Submit or Create new.

Variations

Link style

Links are underlined and should always be in an Interactive colour.

FigmaExternal linkFigma design of links

Content

  • Keep link text as short as possible.
  • If possible, avoid terms like Click here or Read more---instead, use meaningful labels that explain the destination.

Exceptions

The link style can be used without the underline when it is paired with an icon that implies interaction or when it causes unnecessary visual clutter. This does not meet all the accessibility guidelines, but it is sometimes more useful to not overload visually.

Edit this page on GitHub