<h2>When to use</h2>
<p>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.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Link</td>
<td>Use to navigate a user to another page or website, another place on the same page, or to open a link in a new tab.</td>
</tr>
<tr>
<td><a href="/components/button/">Button</a></td>
<td>Use to trigger an action on a page or to complete tasks in other components, such as forms and modals. Notable exceptions are the “Back” and “Next” buttons which may be used to navigate a guided experience.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>Links have a link label and optionally can have an icon, which helps users anticipate the action it will trigger. Inline links must be underlined. Its anatomy can change depending on its <a href="/components/link/?tab=Design#interaction">behaviors and states</a>: rest, hover, active, pressed, or focus.</p>
<details data-name='image-block' data-images='[{"alt":"link label visual","caption":"Inline and standalone links can contain up to 2 elements:\n\n1. Link label: link description\n2. Icon (optional): optional icon, to anticipate the action it will trigger","url":"https://dds.dell.com/site/production/25/29/Link_Anatomy_03169303eb.png"}]' data-numberofcolumns='1'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Review checklist","path":"https://confluence.dell.com/display/ACCESSIBILITY/Checklist+For+Designers","type":"External"},"title":"Design accessibility checklist","description":"Review the Dell Accessibility team&#39;s checklist for links.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit WebAIM","path":"https://webaim.org/techniques/hypertext/link_text","type":"External"},"title":"WebAIM hyperlink guide","description":"Learn about hyperlink accessibility.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/3-ia-mistakes/","type":"External"},"title":"3 Common IA Mistakes","description":"Read the Nielsen Norman Group&#39;s article on links.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/in-page-links/","type":"External"},"title":"Anchor links","description":"Read the Nielsen Norman Group&#39;s article on anchor links.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"View Chat Toolkit (Restricted)","path":"https://dell.sharepoint.com/sites/AIDesignCoE/SitePages/AI-Chat-Toolkit.aspx","type":"External"},"title":"AI Chat Toolkit","description":"Enhance AI chatbot interaction, ensuring a seamless experience from welcome message to \"End Chat\".","icon":"sparkles"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

The link component is used for navigation or as a trigger for downloads and menus. It provides useful information and increases references to the content. Links should always match the text size in your experience. 

Links with [icons](/foundations/icons/) should be a minimum of 16 pixels. Be sure to match links and their accompanying icons in size. For example, if featuring a link with a 24-pixel font size, the icon should also be 24 pixels. 

Link font size should support full-screen magnification and is best supported by using responsive sizing (rem).

### Reference

Inline links are placed in body copy and are used to indicate reference material, whether it opens a new tab, downloads a file, or acts as a trigger for [tooltips](/components/tooltip/) or [popovers](/components/popover/). 

They are underlined and include an icon when the link opens a new window or downloads a document.

<details data-name='image-block' data-images='[{"alt":"This is an example of how an inline text link might be implemented, with an accessibility icon to show that the link opens a different window.","caption":"This is an example of how an inline text link might be implemented, with an accessibility icon to show that the link opens a different window.","url":"https://dds.dell.com/site/production/1b/91/Link_Inline_Use_Case_212007_2a05d3d054.png"}]' data-numberofcolumns='1'></details>

### Navigation

Standalone links are used for navigation and may feature an icon but are not underlined except in hover and focus states. 

Typically, standalone links are used for a navigation menu or within a list of links. If placed by itself, the link should feature an icon to help users anticipate which action it will trigger.

<details data-name='image-block' data-images='[{"alt":"This standalone link includes an icon. The icon lets users know that they can expect to navigate away from the page if they select the link.","caption":"This standalone link includes an icon. The icon lets users know that they can expect to navigate away from the page if they select the link.","url":"https://dds.dell.com/site/production/f6/a1/Link_Standalone_Use_Case_212007_V1_b5117f22c3.png"}]' data-numberofcolumns='1'></details>

## Kinds

Links can be either an inline or a standalone link. These two kinds are used for different purposes and placed in different segments within a page.

<details data-name='image-block' data-images='[{"alt":"Inline link","caption":"Example of an inline link, used to indicate reference material and are placed in the body copy.","url":"https://dds.dell.com/site/production/c3/a9/Link_Kind_Inline_0c1ad2cf6b.png"},{"alt":"Standalone link","caption":"Example of a standalone link, used for navigation and usually are placed within a list or a navigation menu.","url":"https://dds.dell.com/site/production/c2/cb/Link_Kind_Standalone_a0a42856b7.png"}]' data-numberofcolumns='2'></details>

### Options

Links have the option to place an icon on the right or left side of the component. Icons are responsible to anticipate the action it will trigger and useful for accessibility purposes. In this situation, icons are used to tell users they are navigating to another page, opening a new tab, or downloading a file.

<details data-name='image-block' data-images='[{"alt":"Link with icon","caption":"**With an icon**\n\n**Inline links**: include an icon when the link opens a new window or downloads a document\\\n**Standalone links**: include icon if the link is placed by itself","url":"https://dds.dell.com/site/production/36/91/Link_Option_Icon_1_3435447d9f.png"},{"alt":"Link without an icon","caption":"**Without an icon**\n\n**Inline links**: don’t include icon if navigates inside the same page\\\n**Standalone links**: don’t include icon if the link is in a list that anticipates the action or if navigates inside the same page","url":"https://dds.dell.com/site/production/67/bd/Link_Option_No_Icon_d7f0e82971.png"}]' data-numberofcolumns='2'></details>

## Layout

The size of touch targets must be 24 pixels to create maneuverable distance between them, which improves the experience for anyone who has difficulties with fine motor control. 

The easiest way to meet this guideline is to use the default body style, 16 pixels with a line-height of 24 pixels or larger. \
\
If the links use a smaller body style or a custom type style, ensure they have a minimum 24 pixel line-height. While inline links are exempt from this requirement, styling them with 16 pixel default body or greater is still recommended.

To provide a group of links in list form, consider using the [list](/components/list/#kinds) component. For inline links, avoid using too many within a body of text, as it could cause information and cognitive overload.

## Interaction

### Behaviors and states

Links change their color indicating different states: rest, hover, pressed, visited, or focus. These states are based on the user interaction with the link. Users can navigate through links either with mouse or keyboard. 

If using the keyboard control, the focus state will be highlighted. Pressing tab will move the focus to the next link, while shift + tab will move the focus to the previous link on the page. Hitting enter will press the link you are focusing on.

<details data-name='image-block' data-images='[{"alt":"Behavior in rest, hover, active, visited, and focus states.","caption":"Behavior in rest, hover, pressed, active, and focus states. Both inline and standalone links have the same behavior and states.","url":"https://dds.dell.com/site/production/34/f3/Link_Interaction_States_1_f058f4fe6b.png"}]' data-numberofcolumns='1'></details>

| State   | Behavior                                                                                                                                |
| ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| Rest    | When a user has not interacted with the link, it will appear in its default, rest state.                                                |
| Hover   | When a user hovers their cursor over the link’s active area, the link slightly changes color, indicating that it is able to be pressed. |
| Pressed | When a user presses the link, the link changes color, indicating it is in the act of being pressed.                                     |
| Visited | Once a link is pressed, its rest state changes color, indicating that the user has visited the link.                                    |
| Focus   | A blue outline appears around a link when a user tabs or uses keyboard controls to navigate.                                            |

## Standards

### Accessibility

#### **Do not mix the usage of links and buttons**

Follow the guidance above regarding when to use each. Remember links are for navigating, not triggering actions. Misuse causes problems for keyboard and screen reader users who interact with these elements differently and will be confused if they hear them announced by the wrong role.

#### **Make sure all links are unique and descriptive**

Don’t use the word “link” in the text because screen readers will announce it as a link anyway. Each link should accurately describe its purpose. While different links should have unique text, links to the same destination used across pages are an exception and should always use the same link text if possible.

WCAG 2.2: [2.4.4 Link Purpose (In context)](https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context), [3.2.4 Consistent Identification](https://www.w3.org/WAI/WCAG22/Understanding/consistent-identification)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/consistent-identification)**Standalone links that open a new window should give advance notice**

This can be achieved via text, such as “(opens in a new window)”, or by using DDS’ **dds__pop-up-arrow-corner** icon, placed at the end of the link text and given an equivalent alt attribute for screen reader users. For example: alt=“opens in a new window.”

An exception is when a page consists of a list of external links. In this case, a clear heading designating it as a page of links should be sufficient to minimize cognitive confusion for users, avoiding the need for additional labeling.

#### **Vertically-stacked (listed) links should have a line height of 24 pixels or greater**

This guideline creates a minimum distance between touch targets for anyone who experiences difficulties with fine motor control. The simplest and easiest way to meet this guideline is to use the default body style (16 pixels with a line-height of 24 pixels) or larger.

If the links are the small variant (12 pixels) or use a custom type style, ensure they have a minimum 24 pixel line-height. While inline links are exempt from this requirement, styling them with 16 pixel default body or greater is still recommended.

WCAG 2.2: [2.5.8 Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)**Images of text in links should be avoided; use actual text instead**

Screen readers can’t read text that’s embedded in an image, so images containing text should not be used unless deemed absolutely necessary and supported with equivalent accessible text.\
Exception: Logos are considered exempt (but still require an accessible text alternative).

WCAG 2.2: [1.4.5 Images of Text](https://www.w3.org/WAI/WCAG22/Understanding/images-of-text)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/images-of-text)**All links within regular body text should use the inline (underlined) link style**

This ensures that all sighted users can adequately distinguish the link from the text, regardless of their ability to see color.

WCAG 2.2 [1.4.1: Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color)

### Content

#### **Link text**

Link text should describe the page or experience the user is being navigated toward.\
**Do**: Link the descriptive phrase or the place users will land.\
**Don’t**: Replace link text with a URL.\
**Don’t**: Use the phrases “click here” or “learn more”.\
**Don’t**: Use the same link text in the same document to target different pages.

#### **Word length**

Link length is less important than linking a good description. Be concise while accurately describing the referenced page (or document).

#### **Capitalization**

**For standalone links**, use sentence case. Only capitalize the first letter of every word for proper nouns, document titles, or product names.\
**Do**: *Start gaming*\
**Don’t**: *START GAMING*

**For inline links**, use sentence case.\
**Do**: Visit our *homepage* to start gaming.\
**Don’t**: Visit Our *Homepage* to start gaming.

#### **Writing links**

**Do**: If a link opens a PDF, another window, or other forms of media, warnings don’t need to be written in the text link and can be illustrated with an icon.\
**Do**: If a link downloads a file, write link text that indicates this action, as well as the file type.\
**Don’t**: Link preceding articles (a, an, the) when linking text.\
**Don’t**: Underline text that’s not a link.

#### **Link punctuation**

If a link comes at the end of a sentence or before a comma, don’t include the punctuation mark in the link.

#### SEO

Front load important keywords at the beginning of the link text. For example: Shop Latitude laptops

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-link--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-link--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-link--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-link--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-link--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-link--docs&viewMode=docs&websiteFrame=true'></details>

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

Link

React update

<p>The DDS React library now contains all components available in the Angular and Vanilla component libraries.</p>
