Links
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.
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