Link

Links are interactive elements that allow users to navigate to a new page or website or jump to a section of the current page.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
PublishedElement can be used in production
React
React
In progressElement design and development in progress
Documentation
PublishedElement can be used in production

When to use

Links and buttons are not used for the same purpose. Choosing the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities and for those using screen readers.

ComponentUse case
LinkUse to navigate a user to another page or website, another place on the same page, or to open a link in a new tab.
ButtonUse to trigger an action on a page or to complete tasks in other components, such as forms and modals. Exception: “Back” and “Next” buttons may be used to navigate a guided experience.

Anatomy

Links have a link label and an icon (optional), which helps users anticipate the action it will trigger. Inline links must be underlined. Its anatomy can change depending on its behaviors and states: rest, hover, active, pressed, or focus.

Inline and standalone links can contain up to 2 elements:

  1. Link label: link description
  2. Icon (optional): optional icon, to anticipate the action it will trigger

Articles

Design accessibility checklist

Review the Dell Accessibility team's checklist for links.

WebAIM hyperlink guide

Learn about hyperlink accessibility.

3 Common IA Mistakes

Read the Nielsen Norman Group's article on links.

Anchor links

Read the Nielsen Norman Group's article on anchor links.

Feedback