Link

Links allow users to navigate to a different location. They can be presented inside a paragraph or as standalone text.

Link maybe to internal pages or the external resources.

Example

Anatomy

How to use

The default variant of the primary link is indicated by the colour blue. It is intended to attract attention to the link and is most suitable when the blue colour does not create an overwhelming visual experience.

When to use

Links are for usage in body copy and are not appropriate in titles. TODO: Discuss if more are fine
Use text for links rather than graphics or icons.
Links should be three words or less.
Text should be consistent with the title of the intended destination.
Navigate to a different page within the application
Navigate to an entirely different site
Jump to an element on the same page
Link to emails or phone numbers

When not to use

Avoid the term “click here“, “other links“ to “here,” or the web address itself. Instead, use a meaningful descriptive label for the link, and match the destination site name.
Use a button instead of a link for actions that will change data or manipulate how it is displayed, change a state, or trigger an action. Buttons should never be used for navigational actions.