React Components

# Button Group

 

## Overview

---

The **Button Group** component arranges multiple related button elements into a single, cohesive container. It enables users to make selections from a set of related options, either allowing one or multiple active states depending on configuration.

<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>ButtonGroup</td></tr><tr><th scope="row">Also known as</th><td>-</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/branch/lllHUGUkhU6rZKAracs1Ig/ODS---UI-Kit" 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-group" target="_blank">Github<span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a></td></tr></tbody></table>

## Usage

---

Use a **Button Group** when multiple buttons represent a set of related options or actions.

It is commonly used for:

-   Toggle sets for text formatting or styling.
-   Filtering or grouping options within a toolbar.
-   Segmented controls in compact layouts.

### Dos & Don'ts

| ✅ Do |
| --- |
| - Use Button Group for logically related actions |
| - Keep labels short |
| - Use single selection for mutually exclusive choices |
| - Use multiple selection when combined states are allowed |

| ❌ Don't |
| --- |
| - Group unrelated actions together |
| - Mix icon-only and text-only buttons inconsistently |
| - Overcrowd toolbars with too many grouped options |

### Best Practices in Context

1.  **ButtonGroup**
2.  **Inactive buttons**
3.  **Active buttons**

## Behavior

---

**Button Group** buttons can be focused and triggered. **Button Group** or its buttons can be disabled.

### Single Selection

Only one button in the group can be selected at a time.

Selecting a new button automatically deselects the previously selected one.

### Multiple Selection

Several buttons can be selected simultaneously.

Each button toggles independently between selected and unselected states.

### Unselected State

It may be allowed that no button is selected at all, when the user can clear all selections (e.g., "No filter applied").

## Navigation

---

### Focus Management

When the **Button Group** receives focus, it is set on the first button.

Disabled buttons are skipped in the focus order and cannot be activated.

Focus remains within the group when navigating between items using arrow keys.

### General Keyboard Shortcuts

Pressing Tab moves focus to the first button in the group.

Pressing Shift + Tab moves focus to the previous focusable element outside the **Button Group**.

Pressing Arrow Right moves focus to the next button in the group.

Pressing Arrow Left moves focus to the previous item in the group.

Pressing Home (or fn + Arrow Left) moves focus to the first button.

Pressing End (or fn + Arrow Right) moves focus to the last button.

Pressing Space or Enter activates or deactivates the focused button, updating the selection immediately.

## Accessibility

---

The **Button Group** component handles by itself the accessibility requirements regarding the control grouping.

Though you need to ensure that each of your items follows the .