Link

Usage

Example

Principles

• Too many links will clutter a page and make it difficult for users to identify their next steps. This is especially true for inline links, which should be used sparingly.
• Use links when you want users to:
  • Navigate to a different page
  • Navigate to an entirely different site
  • Jump to an element on the same page
  • Link to emails or phone numbers
• HDS Link supports a link with an external icon. Use the external prop when you wish to navigate to an entirely different site.
• HDS Link supports a link that opens in a new tab. Use the openInNewTab prop when you wish to open the link in a new tab.
  • Generally, links should not open in a new tab. However, this can be desirable if the user is in a middle of a process, e.g. filling a form.

Variations

Default

These links are the default link variant. Inline links are used within a sentence or paragraph and are underlined.

The underlining helps differentiate them from the text they are placed next to and makes it clear users can interact with them. Inline links should not be used on their own.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

HDS Github

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

---

Standalone

Standalone links are used on their own or directly after the content, and they are underlined. If you wish not to have an underline, consider using a button instead.

Standalone links should not be used within sentences or paragraphs.

Internal and external links

All HDS links can either be internal or external. Internal links point to the currently active website. External links navigate to an entirely different site. You can also make the link open in a new tab.

Links with icons

HDS Links can be paired with an icon. This can be useful if the link has unusual target such as a phone number, an email address (mailto link), a PDF document or a photo.

Note! These icons are meant to describe the link target. If you need a directional icon for the link (e.g. an arrow), you should instead use (a supplementary button with role="link".