React Components

# Button

_A **Button** component aims to initiate an action. Its text indicates the related intent, its aspect describes the importance and influence level._

## Overview

---

**Buttons** are triggerable elements that are used to set actions. They communicate calls to action to the user and allow them to interact with pages.

**Button** labels express explicitly what action will occur when the user interacts with it. Its aspect describes the importance and influence level.

This component exists in many ways : variants, sizes and colors.

<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>Button</td></tr><tr><th scope="row">Also known as</th><td>Call To Action, CTA</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=3-23353" 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/button" 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-button--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

---

**Buttons** are mainly used for actions, like adding, removing, validating, etc. They are used to allow users to interact with the page or its content.

**Buttons** work with other elements on a screen to surface the most important actions the user wants to take in that context. They must respect the proximity law in order to guide the user on the action to be performed and the expected result. A **Button** label indicates what happens when the user taps the **Button**, even if it's just to acknowledge something.

**Buttons** don't usually redirect to an external page. For that, see .

### 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 button are not typically expected to handle navigation.

### Dos & Don'ts

| ✅ Do |
| --- |
| - Use a primary Button to highlight the main action on a page or in a form |
| - Pair an outline Button for complementary actions (e.g., "Cancel", "Learn more") |
| - Maintain a clear visual hierarchy between Button types (primary, outline, ghost) |
| - Use icons when they add clarity to the action (e.g., arrow for "Next", trash for "Delete") |
| - Choose the appropriate size based on context |

| ❌ Don't |
| --- |
| - Don't use a Button as a link, use the Link component instead |
| - Don't show more than one primary button per view |
| - Don't place two identical Buttons side by side (same label and style) |
| - Don't use standalone decorative icons in Buttons unless the action is universally understood |
| - Don't use a ghost Button as the main call to action |
| - Don't overload a Button with too much text or visual clutter |

### Best Practices in Context

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

## Behavior

---

A **Button** can be hovered, focused, clicked and disabled.

When in disabled state, it is impossible to focus or click on it. A "disabled" cursor is shown when hovering the disabled component.

The **Button** supports a loading state.

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

## Variation

---

### Color

-   **Primary** _(default)_: used for main usage of **Buttons**, and linked to the brand graphical charter.
-   **Critical**: alerts users to high-priority actions or warnings that require immediate attention.
-   **Neutral**: secondary actions (such as clearing field or close button).

### Variant

-   **Default**: primary actions, featuring a full background with a matching border to signify important emphasis.
-   **Outline**: secondary actions, featuring a transparent background with a visible border to signify less emphasis than primary buttons.
-   **Ghost**: tertiary or less prominent actions, blending into the background with minimal styling until hovered or focused to reduce visual dominance.

### Size

-   **Extra Small**: actions in tiny spaces, such as action button in fields or compact rows in a table.
-   **Small**: actions in compact spaces or within densely packed interfaces, providing a more subtle and space-efficient option.
-   **Medium** _(default)_: main usage of **Buttons**, when they can be displayed in an important manner.

## Navigation

---

### Focus Management

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

If the **Button** is disabled, it does not receive focus and cannot be activated via keyboard.

### General Keyboard Shortcuts

Pressing Enter or Space while the **Button** is focused activates it, triggering its action.

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

## Accessibility

---

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

### Always provide an explicit text content

**Button** should always have a clear and descriptive text content to indicate their purpose.

```jsx
<Button>
  Clear
</Button>
```

Screen readers will announce the text content.

### Icon Button

If a **Button** contains only an icon, it must include an [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) to provide context.

```jsx
<Button aria-label="Clear">
  <Icon name="xmark" />
</Button>
```

Screen readers will announce the label.

### Using aria-labelledby for additional context

When a **Button** is associated with an existing label, content is read by screen readers when the **Button** receives focus.

Filter your search results

```jsx
<>
  <Button aria-labelledby="filter-btn">
    <Icon name="filter" />
  </Button>
  <span id="filter-btn">
    Filter your search results  </span>
</>
```

When the **Button** is focused, the screen reader will announce the linked label.