React Components

# Tag

_A **Tag** component is used to display keywords or categories, with a removal feature._

## Overview

---

The **Tag** component is a small UI element used to represent metadata, keywords, categories, or other contextual information.

**Tags** are removable and can include an icon as additional prefix element.

They are commonly used in interfaces for categorizing content, filtering, and adding contextual details.

<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>Tag</td></tr><tr><th scope="row">Also known as</th><td>Chip (previous name), Label, Pill</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=52-11580" 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/tag" 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-tag--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

---

Use the **Tag** component to display labels, categories, or metadata that describe or classify content.

**Tags** often appear in contexts like filters and lists.

Ensure that **Tags** are clearly labelled and easily distinguishable from other UI elements.

### Dos & Don'ts

| ✅ Do |
| --- |
| - Use Tags to represent interactive labels such as filters, categories, or user-defined keywords |
| - Ensure the label is short, descriptive, and scannable, aim for 1–2 words |
| - Use Tags in search contexts, facet filtering, or content classification |
| - Allow Tags to be removable or toggleable if the interaction requires it (e.g., deselecting a filter) |
| - Keep visual distinction between Tags (interactive) and Badges (static) |
| - Trigger removal action when the Tag displays a delete icon |

| ❌ Don't |
| --- |
| - Don't use a Tag if there is no interaction expected, prefer the Badge component instead |
| - Don't use full sentences or long text in a Tag label |
| - Don't mix Tags with different behaviors (e.g., some removable, some static) unless necessary and clearly indicated |
| - Don't use Tags as primary action triggers (e.g., "Submit", "Save"), use Buttons instead |

### Best Practices in Context

1.  **Tag**
2.  **Icon** - optional (left or right)
3.  **Delete icon** - optional
4.  **Label** - optional

## Placement

---

Since it provides extra information to a sibling element, in can be used inside components in various places, referring to the nature of its environment.

Multiple **Tags** can be displayed:

-   on a single line
-   stacked vertically

## Behavior

---

**Tags** can be hovered, focused and disabled.

## Variation

---

### Color

-   **Neutral**: displaying general labels or metadata without conveying any particular status or urgency.
-   **Information** _(default)_: displaying a general information for the user, without conveying any particular urgency.
-   **Success**: indicating positive statuses or successful outcomes, providing a visual cue for achievements or completed tasks.
-   **Warning**: alerting users to potential issues or cautionary information, signaling that attention is needed.
-   **Critical**: highlighting severe issues or urgent information that requires immediate attention, emphasizing high-priority concerns.

### Size

-   **Medium** _(default)_: main size for displaying **Tags**.
-   **Large**: highlighting important labels or metadata with greater visibility and emphasis, making them easily noticeable to users.

## Navigation

---

### Focus Management

The **Tag** component is focusable and follows the same keyboard interactions as the Button component.

### General Keyboard Shortcuts

Pressing Tab moves focus to the **Tag**.

Pressing Enter or Space triggers the assigned action: removing the **Tag**.

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

## Accessibility

---

Unlike , **Tags** are interactive and can be removed by the user. To ensure accessibility, it is important to:

-   Group **Tags** properly when they are part of a list.
-   Announce the removal action so screen reader users understand the functionality.

### Structuring groups of Tags with lists

When multiple **Tags** are displayed together (e.g., a collection of selected filters or labels), they should be wrapped in an unordered list of items (`<ul>` and `<li>`) to ensure proper announcement by screen readers.

```jsx
{
  globals: {
    imports: `import { Tag } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <ul>
      <li>
        <Tag>Design</Tag>
      </li>
      <li>
        <Tag>Development</Tag>
      </li>
      <li>
        <Tag>Accessibility</Tag>
      </li>
    </ul>
}
```

This allows screen readers to announce a list with the number of items, making it clear that these **Tags** belong to a structured set.

### Alternative approach

When modifying the HTML structure is not possible, use [role="list"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role) and [role="listitem"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/listitem_role) to mimic list semantics.

```jsx
<div role="list">
  <div role="listitem">
    <Tag>
      Design    </Tag>
  </div>
  <div role="listitem">
    <Tag>
      Development    </Tag>
  </div>
  <div role="listitem">
    <Tag>
      Accessibility    </Tag>
  </div>
</div>
```

This ensures that screen readers still recognize the **Tags** as a structured list, even without native `<ul>` and `<li>` elements.

### Announcing the delete action with aria-label

Since the **Tag** is removable, it should provide clear feedback to assistive technologies.

```jsx
{
  globals: {
    imports: `import { Tag } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Tag aria-label="Remove my tag">
      My tag    </Tag>
}
```

This ensures that users know the **Tag** can be removed. Screen readers will announce the tag aria label and the button type.