React Components

# Link

_**Link** is a component that enables redirection to a new page, section, website or other resources:_

[Link](https://www.ovhcloud.com)

## Overview

---

A **Link** allows users to move through a website by redirecting them to a different page or section.

It can also enables **Links** to other resources.

<table class="_table_e3iru_2 _table--md_e3iru_59 _table--striped_e3iru_167 _identity-card__table_75e8e_7" data-ods="table" data-storybook="table"><tbody><tr><th scope="row">Name</th><td>Link</td></tr><tr><th scope="row">Also known as</th><td>Hyperlink, Anchor</td></tr><tr><th scope="row">Links</th><td><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://www.figma.com/design/9jDDTcR4a9jPRFcdjawAlf/ODS---UI-Kit?node-id=44-6837" target="_blank">Design <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://github.com/ovh/design-system/tree/master/packages/ods-react/src/components/link" target="_blank">Github <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://ovh.github.io/design-system/v18.6.4/?path=/docs/ods-components-link--documentation" target="_blank">Previous major version<span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a></td></tr></tbody></table>

## Usage

---

**Links** are used as navigational elements.

They are also used when linking to another document. In that case, **Link** description should contain type and size of document.

### When to use a link or a button?

Links and buttons serve different purposes, and using them correctly improves both accessibility and user experience.

-   Use a link when the action navigates the user to another page or resource, either within your application or to an external site
-   Use a button when the action performs a function or triggers a behavior on the current page, like submitting a form, opening a modal, or toggling a menu.

A button should not mimic a link. It can lead to confusion for users and assistive technologies, as buttons are not typically expected to handle navigation.

### Dos & Don'ts

| ✅ Do |
| --- |
| - Use a link to navigate to another page, section, or external website, not to trigger actions |
| - Make link labels clear and descriptive, so users understand where the link will take them |
| - Keep link labels short ideally 1–4 words |
| - Indicate when a link leads to a document or file by including its type and size (e.g., "Annual Report (PDF, 1.2MB)") |
| - Optionally include an icon, but ensure it's styled consistently with the link label |

| ❌ Don't |
| --- |
| - Don't use a link to perform actions like "save", "submit", or "cancel", use a button for that |
| - Don't use vague text like "Click here" or "Read more", it provides no context for screen readers or SEO |
| - Don't write entire sentences as link label |
| - Don't apply different colors to a link and its adjacent icon. They should appear as one cohesive element |
| - Don't open a link in a new tab or window unless it's clearly indicated and necessary (e.g., for external sites) |
| - Don't forget to set appropriate rel attributes (e.g., rel="noopener noreferrer") for external links opened in new tabs |

### Best Practices in Context

1.  **Link**
2.  **Label** - optional
3.  **Icon** - optional (left or right)

## Placement

---

A **Link** can stand alone on a page, or it can be placed within a sentence or a paragraph.

## Behavior

---

**Link** component can be hovered, focused, clicked and disabled.

When disabled, users cannot focus nor click on the **Link**.

On hover, **Link** is underlined and its color changes.

An optional icon can be displayed on the left or right of the **Link** label content. Icon-only **Link** also exists but it must meet accessibility requirements. See Accessibility section below.

When users clicks anywhere on the **Link**, even its optional icon, they are redirected to the expected page or section.

## Navigation

---

### Focus Management

The **Link** component can receive keyboard focus and is part of the standard tab order.

### General Keyboard Shortcuts

Pressing Enter while a **Link** is focused activates it, navigating to the associated destination.

Pressing Shift + Tab moves focus to the previous interactive element.

If a **Link** opens in a new tab, focus remains on the original page unless otherwise specified.

## Accessibility

---

This component complies with the [Link WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/link/) .

### Icon-only Link

If a **Link** is represented only by an **Icon**, it must have an explicit accessible label to provide context about its destination or action.

[​](https://www.ovhcloud.com)

```jsx
<Link
  aria-label="Go to homepage"
  href="https://www.ovhcloud.com"
>
  <Icon name="home" />
</Link>
```

Screen readers will announce the link and its label.

### Link opening in a new tab

When a **Link** opens in a new tab (`target="_blank"`), users should be informed to avoid confusion. This can be done by adding a visual indicator (e.g., Icon: "external") and using `aria-label` to provide context.

[​](https://www.ovhcloud.com)

```jsx
{
  globals: {
    imports: `import { ICON_NAME, Icon, Link } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Link aria-label="Visit Example (opens in a new tab)" href="https://www.ovhcloud.com" target="_blank">
      <Icon name={ICON_NAME.externalLink} />
    </Link>
}
```

The screen reader will announce the link, the opening in a new tab behavior and the link label.

### Downloadable files

If a **Link** points to a file download, it should include the file type and size information.

[​](https://www.w3.org/TR/2024/REC-WCAG21-20241212.pdf)[Download WCAG20 Guidelines (PDF, 481 KB)](https://www.w3.org/TR/2024/REC-WCAG21-20241212.pdf)

```jsx
{
  decorators: [story => <div style={{
    display: 'grid',
    gridTemplateColumns: '1fr'
  }}>{story()}</div>],
  globals: {
    imports: `import { ICON_NAME, Icon, Link } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Link aria-label="Download WCAG20 Guidelines (PDF, 481 KB)" href="https://www.w3.org/TR/2024/REC-WCAG21-20241212.pdf">
        <Icon name={ICON_NAME.download} />
      </Link>
      <Link href="https://www.w3.org/TR/2024/REC-WCAG21-20241212.pdf">
        <Icon name={ICON_NAME.download} />
        <span>Download WCAG20 Guidelines (PDF, 481 KB)</span>
      </Link>
    </>
}
```

Screen readers will announce the link, the link label with the file name, type and size, ensuring users know they are downloading a file.