React Components

# Code

_**Code** component highlights strings or small blocks of **Code** so it makes them easier to read and understand_

```
import { Text } from '@ovhcloud/ods-react';
```

## Overview

---

A **Code** component displays a string of **Code** or a small block of **Code** that can be copied to the clipboard.

<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>Code</td></tr><tr><th scope="row">Also known as</th><td>Code snippet</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=26-7720" 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/code" 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-code--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

---

**Code** is mainly used for sharing examples of **Code** that can be a string or a small block of **Code**.

An optional icon **Button** may be added in order to copy its content.

### Dos & Don'ts

| ✅ Do |
| --- |
| - Use the Code component to display short and reusable code snippets (e.g., command lines, config) |
| - Make sure the code is readable and scannable, with appropriate syntax highlighting |
| - Use inline code within text blocks for single tokens |
| - Wrap multiline snippets in a block format only when necessary and still concise |

| ❌ Don't |
| --- |
| - Don't use the Code component to display very long code blocks |
| - Don't use the Code component for non-code content |
| - Don't overload the UI with code examples in places where documentation would be clearer |
| - Don't use the component if the code can't be easily understood, reused, or copied |
| - Don't style code with custom formatting that breaks consistency (e.g., non-monospace fonts, shadows, etc.) |

### Best Practices in Context

1.  **Code**
2.  **Content**
3.  **Copy button** - optional
4.  **Tooltip** (when the copy button is displayed)

## Placement

---

By default, the **Code** content is left-aligned in its container.

It should be vertically aligned with other form components on a same page.

## Behavior

---

The "Copy" icon **Button** can be hovered, focused and clicked.

If the optional icon **Button** exists, when clicking on it, the **Code** content is copied to the user's clipboard.

Copy label and copy success label can be customized.

## Navigation

---

### Focus Management

The **Code** component itself is non-interactive and does not receive keyboard focus.

However, if the component includes a "Copy" action, the associated Copy button can be focused.

### General Keyboard Shortcuts

Pressing Tab moves focus to the "Copy" button if available.

Pressing Enter or Space while the "Copy" button is focused copies the code to the clipboard.

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

## Accessibility

---

Screen readers will announce the embedded code and the copy button **Tooltip** content.