Skip to main content

Links

Component status:Beta
Links are used as a navigational element.

Link Types#

Inline Link#

Here is an example of an inline link within a paragraph.

Inline Link — Alternate#

Here is an example of an inline link within a paragraph on a light non-white background.

Inline Link — Reverse#

Here is an example of an inline link within a paragraph on a dark background.

Inline Link — Scarlet#

Here is an example of an inline link within a paragraph on a scarlet background.

Text Link#

Text links are used on their own directly following content, within Cards, or in Link Lists. They should not be used within sentences or paragraphs.

When to use a Link#

  • Navigating to a new page or view in your application
  • Navigating to different web page, e.g. external documentation

When to consider something else#

  • Opening or closing a modal or dialog
  • Triggering a dropdown menu
  • Submitting data to the server

Accessibility#

Your link should always describe where it will take users. Users tend to scan text online, and elements that stand out (like links) grab attention. Clear links can help users navigate more quickly.

For example, instead of "Learn more," use "Learn how to reset your passphrase."

Never use a link to say, “click here.” A nondescript link forces users to backtrack and read the surrounding text for more context. This is even more problematic for those who rely on screen readers, which can list links for quicker navigation. A list of “click here” links isn’t helpful for anyone.

Links must have at least 4.5:1 contrast with the background (3:1 for large text) to meet WCAG 2 Level AA.

Resources#