<h2>What’s new in v3</h2>
<ul>
<li><strong>Standalone version:</strong> The standalone link no longer uses an underline in its default (rest) state. This is the only difference from the inline version.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Use a link to navigate users to another page, a location on the same page or an external website. Links indicate navigation only and should not be used to trigger actions.</p>
<p>Use the link to:</p>
<ul>
<li>Take users to related content, details or supporting information.</li>
<li>Navigate within a page using anchor links.</li>
<li>Direct users to external resources.</li>
<li>Open content in a new tab when needed.</li>
</ul>
<p>Links and buttons have different roles. Using the correct one makes interactions clearer and more predictable for all users, including those using assistive technologies.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Link</td>
<td>Navigate to another page, location on the same page, or an external website. Links can also open 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 within components such as forms and modals. Exceptions include “Back” and “Next” buttons used in guided flows.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>Links include a label and an optional icon. Inline links must be underlined. Their appearance changes based on <a href="/components/link/?tab=Design#interaction">behaviors and states</a>.</p>
<details data-name='image-block' data-images='[{"alt":"link label visual","caption":"\nInline and standalone links can contain up to two elements:\n\n1. **Link label**\n\n   : the descriptive text\n2. **Icon (optional)**\n\n   : communicates direction or type of action","url":"https://dds.dell.com/site/v3/components/link/link-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

The link component is used for navigation or to trigger downloads. Links provide supporting information and improve access to related content. Link text should always match the text size used in the surrounding experience.

Link text should support full‑screen magnification and is easiest to manage using responsive units (rem).

### Reference (inline link)

Inline links appear within body copy and direct users to reference material. They may open a new window, navigate to another page, or download a file.

Inline links are always underlined. When a link opens a new window or downloads a document, include an icon so users understand what will happen before they interact with it.

<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/v3/components/link/link-usage-reference.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Navigation (standalone link)

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

Standalone links often appear in navigation menus or lists. When a link appears on its own, include an icon or label to clarify its action or destination at a glance.

<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/v3/components/link/link-usage-navigation.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

Links come in two kinds:

* Inline link: appears within body text to reference related content
* Standalone link: appears on its own, often in lists or navigation

<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/v3/components/link/link-kinds-inline.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/v3/components/link/link-kinds-standalone.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

### Options

Links can include an icon on the left or right side.

Links with [icons](/foundations/icons/) should be at least 16 pixels. Match the icon size to the text size of the link. For example, if the link uses a 24‑pixel font size, the icon should also be 24 pixels.

**With an icon**

* Use for **inline** links that needs extra clarity, such as navigating to another page, opening a new tab, or downloading a file.
* Use for **standalone** links placed by themselves to help communicate the destination or action.

**Without an icon**

* Use for **inline** links that navigate within the same page.
* Use for **standalone** links when the label already makes the destination clear.

<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/v3/components/link/link-options-with-icon-inline.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/v3/components/link/link-options-no-icon-inline.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Layout

Use a 24‑pixel line height to give users enough space to interact with the touch target.

Using the default body style (16‑pixel text with a 24‑pixel line height) meets this requirement. If you use a smaller type size, make sure the line height is still at least 24 pixels. Inline links are exempt, but using them with 16‑pixel text or larger keeps them readable.

Use the list component when you need to group several links. Avoid adding too many inline links in a single paragraph, as this makes the text hard to scan.

## 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/v3/components/link/link-interaction.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                                 | Collection | CSS var                                           | Preview    |
| ------------------------------------ | ---------- | ------------------------------------------------- | ---------- |
| link/gap                             | Component  | `var(--dds-link-gap)`                             | \-         |
| icon/size/xs                         | Component  | `var(--dds-icon-size-xs)`                         | \-         |
| link/rest                            | Component  | `var(--dds-link-rest)`                            | \#0063B8   |
| link/neutral/rest                    | Component  | `var(--dds-link-neutral-rest)`                    | \#1D2C3B   |
| color/text/ERROR/rest                | Semantic   | `var(--dds-color-text-error-rest)`                | \#BB2A33   |
| border/radius/xs                     | Semantic   | `var(--dds-border-radius-xs)`                     | \-         |
| color/background/SURFACE/transparent | Semantic   | `var(--dds-color-background-surface-transparent)` | \#FFFFFF00 |
| link/hover                           | Component  | `var(--dds-link-hover)`                           | \#00468B   |
| color/text/NEUTRAL/hover             | Semantic   | `var(--dds-color-text-neutral-hover)`             | \#141D28   |
| color/text/ERROR/hover               | Semantic   | `var(--dds-color-text-error-hover)`               | \#8C161F   |
| link/neutral/hover                   | Component  | `var(--dds-link-neutral-hover)`                   | \#141D28   |
| link/active                          | Component  | `var(--dds-link-active)`                          | \#002A58   |
| color/text/ERROR/pressed             | Semantic   | `var(--dds-color-text-error-pressed)`             | \#590A0F   |
| link/visited/active                  | Component  | `var(--dds-link-visited-active)`                  | \#40155C   |
| link/visited/hover                   | Component  | `var(--dds-link-visited-hover)`                   | \#66278F   |
| link/visited/rest                    | Component  | `var(--dds-link-visited-rest)`                    | \#8A3FBA   |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-link--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-link--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-link--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-link--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-link--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-link--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></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. 