Introduction
A link allows users to move through applications and websites.
Anatomy
Link anatomy:
Label
Leading icon (optional).
They can be used on their own (standalone links) or in sentences (inline links).
Standalone links are used on their own directly in the following content. Inline links appear within paragraphs or sentences. They’re used to direct users to content that’s not directly related to the journey they’re on.
Similar content
Link appearance can be quite similar to button or CTA. Usually, if the user is making changes to the back or front-end of the site when clicking, you should use a button. If the user is being directed to a different page, you can use a link.
States
Links have 8 states that define their appearance: default, hover, focus, active, inactive, visited, selected and unavailable.
Usage
Do
Links need to be clear and concise. The user is able to anticipate what will happen when they click.
Keep links as short as possible (still making them clear).
Links that aren’t in a sentence should start with a capital letter and not be punctuated (exception of questions).
Use the same text for links that navigate to the same URL.
Don’t do
Avoid generic descriptions, link text must not be "click here".
Linking a full phrase is problematic because the word order might change, which would break the link into two parts.
Standalone links don’t need a full stop.