Hyperlink

Hyperlinks are anchor tags users can interact with to navigate to other pages.

Overview

Hyperlink is a component used in our products as a guide through multiple web pages. Because we have a lot of content to display (documentation, additional information) and many pages, users may need to navigate through pages to proceed with their needs.

Hyperlink are giving them just-in-time information without overloading or distracting them with information that is too tangential or secondary to the tasks at hand.

Guidelines

How to use

It should remain in a secondary role:

• at the end of a paragraph if the link is related to the whole paragraph (example: documentation)

• as part of the paragraph, if the link is related to specifics words in a paragraph

When to use

When complementary information is available and may help user to accomplish their tasks, or when we want users to perform an action on another page.

When not to use

They are not meant to be used as a Button. Buttons are meant to perform precise actions, not redirect users to another page.

🥊 Hyperlink VS Link Button

Hyperlinks redirect users to a new page. It means pressing the trigger results in a URL change. While Button action happens on the same page.

For accessibility, the distinction becomes even more important, especially for those who are using Assistive Technology (A.T.) such as screen readers and dictation software.

Datatable has its own hyperlink rules and components. Do not import this component into a datatable. Learn more about Datatable

In order to distinguish Hyperlink from Paragraph, this component has its Typography style: Bold, Underline, and Blue.

We add an icon to inform users they will open a new page by clicking on the component. The icon is displayed after the text.

An external link in a paragraph

💡 Hyperlink is an anchor text, which means the actual link is hidden behind a more readable text. In only rare cases, we provide the full link directly in the interface (follow orders on the partner's website, for example) as this practice deteriorates visual design and user experience.

Accessibility

• Hyperlink must be differentiated from other text as it will open new pages. While color is useful for the majority of users to convey this information, it is not enough for users with visual impairment. We decided to use color+bold+underline to ensure this component stands out from other text.

• In our products, Hyperlink will, most of the time, guide users to a new page in another window. That's why adding 'launch' icon is important for all users to understand our navigation. It's also an important piece of information for Screen Reader to inform visually impaired users of the consequences of their actions. The icon is not mandatory, but it does bring useful information for all.

Key takeaways

• Use Hyperlink to enrich users' knowledge with complementary content we provide

• Use Hyperlink in a context, in or at the end of a paragraph

• Add Icon to inform all users they will open a new page

• Paste a full link into the interface. Hyperlink should be easily readable

• Use it as an Action Button

• Use it in a datatable