Skip to main content

Link

Last updated:
11/14/2023

A link allows the user to navigate to another page, an external page, or another section on the same page.

View in Storybook
Link

Styles

Default

Use the default style for standalone links or for any link that cannot be triggered another way.

Default link

Subtle

Use for situations where the link function is obvious, where there is another way to trigger the link, or if both occur simultaneously.

Subtle link

Ghost

Use for links appearing on dark backgrounds. Do not use on backgrounds that are lighter than neutral-40.

Ghost link

Call-to-action (CTA)

Use to emphasize the link’s call-to-action or when the link performs an action and take the user somewhere else, such as a mailto link. Do not over-use this modifier. There is no visited state for this modifier.

CTA link

Mailto

Use for allowing the user to send an email to a specified email address. Mailto links will open a new email in the user’s default email application.

Mailto CTA link

Navigation

This style is used only for navigation or within navigational components or patterns. It’s a simpler version of the default link style and does not have an underline. This style is only used in breadcrumbs, primary navigation, secondary navigation, tertiary navigation, and wizard navigation.

Navigation link

Usage

Links should be used for navigation only. Inline links will take on the size of the surrounding text.

Links should be used to:

  • Navigate to another page or website
  • Jump to another place on the same page — this is called a jump link
  • Link directly to phone numbers or email addresses
  • Open resources such as PDFs

If your use case is not listed here, you may need to use a Button.

Content guidelines

Link text should be unique, concise, and easily understood — even out of context.

When writing link text, always indicate the following:

  • Where the link will take the user
  • What the user can do there, if applicable
  • If the link is an external link

Do:

  • Use unique, meaningful text
  • Write in sentence case
  • Link directly to the most relevant page
  • Identify jump links in link text
  • Identify external links
  • Identify the file type if linking to non-HTML content, such as PDFs
  • Identify phone or email address links
  • Append invisible text to the end of the link text, if necessary
  • Use a verb when writing for a call-to-action style link
  • Ensure that the page’s h1 (title), page breadcrumb text, and navigation link text match
  • Use sentence case, except for proper nouns and product names

Don't:

  • Use generic link text
  • Use the same text for multiple links on the same page
  • Link to the same page in multiple places on the page
  • Use links for actions
  • Use URLs as link text
  • Disable a link
  • Add invisible text in the middle of link text
  • Mismatch the text of the page’s h1 (title), page breadcrumb text, and navigation link text match
  • Truncate the navigation link text — for example, Lorem ipsum ...

User research

Key takeaways

Underline

The underline is a universally understood indicator of a hyperlink. Links are indicated either by color and an underline or by an underline only.

All links must have an underline, despite its color, to indicate the link’s function. Only underline link text.

Visited state

The visited link state indicates that a user has already opened that link. This state is a helpful indicator during task completion or site exploration. It is important for users to know if they’ve visited that page before. Do not remove this state. We’ve made an exception to this rule for the call-to-action modifier only.

We ran one test involving the effectiveness of the external link icon. The usability test found that 80% of users expected to go to another page on the same website when clicking an external link with icon. The test also found that the users either did not see the icon or know what it meant. When adding an external link make sure to explain to the user that they will go to a separate site with text or a badge as well as the external link icon.

Users expect to be taken somewhere when clicking on a link within the navigation. Links within content are more important than links in the footer or navigation. Link styles should be consistent between navigation components.

Patient section — Navigation Testing Overview + Report

MERGE — Navigation Usability Testing Readout

Accessibility

This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards and content guidelines to ensure that this component is fully accessible.

For more information, see WAI-ARIA Authoring Practices for links and Deque’s screen reader keyboard shortcuts and gestures documentation.