# React Bootstrap Button Group

A React Bootstrap button group in AdminKit: joined buttons, toolbars, sizes, vertical groups and a radio group that keeps its value in React state.

Use a button group when a few buttons belong together, such as the views of a page or a switch between date ranges. Bootstrap's `.btn-group` class joins them into one control.

In [AdminKit for React](/react/) a button group is plain markup in JSX: a `<div>` with `role="group"` around your buttons. There is no component to import. Button groups are part of the free and PRO versions.

## Example

```html
<div class="btn-group" role="group" aria-label="Text alignment">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
```
```tsx code
<div className="btn-group" role="group" aria-label="Text alignment">
  <button type="button" className="btn btn-secondary">Left</button>
  <button type="button" className="btn btn-secondary">Middle</button>
  <button type="button" className="btn btn-secondary">Right</button>
</div>
```

## Classes

| Class | Effect |
| --- | --- |
| `btn-group` | Joins the buttons in a row |
| `btn-group-vertical` | Stacks the buttons in a column |
| `btn-group-sm`, `btn-group-lg` | Sizes every button of the group, instead of `btn-sm` or `btn-lg` on each |
| `btn-toolbar` | A row of button groups; space them with `me-2` |
| `btn-check` | Hides a checkbox or radio input, so its `label.btn` acts as the button |

## Radio group from state

When the user picks exactly one option, such as a date range, use a segmented control. It is a group of radio inputs with `btn-check`, each with its own `label`. In JSX, the label's `for` attribute is written `htmlFor`. Keep the selected value in state and render the options with `map`:

```html
<div class="btn-group" role="group" aria-label="Date range">
  <input type="radio" class="btn-check" name="range" id="range-day">
  <label class="btn btn-outline-primary" for="range-day">Day</label>

  <input type="radio" class="btn-check" name="range" id="range-week" checked>
  <label class="btn btn-outline-primary" for="range-week">Week</label>

  <input type="radio" class="btn-check" name="range" id="range-month">
  <label class="btn btn-outline-primary" for="range-month">Month</label>
</div>
```
```tsx code
import { Fragment, useState } from "react";

const ranges = ["Day", "Week", "Month"];

export function RangeSwitch() {
  const [range, setRange] = useState("Week");

  return (
    <div className="btn-group" role="group" aria-label="Date range">
      {ranges.map((item) => {
        const id = `range-${item.toLowerCase()}`;
        return (
          <Fragment key={item}>
            <input
              type="radio"
              className="btn-check"
              name="range"
              id={id}
              checked={range === item}
              onChange={() => setRange(item)}
            />
            <label className="btn btn-outline-primary" htmlFor={id}>
              {item}
            </label>
          </Fragment>
        );
      })}
    </div>
  );
}
```

For checkboxes, use `type="checkbox"` and keep a list or a set of the checked values.

## Toolbar

A toolbar lines up several button groups in one row. The buttons demo builds its toolbar from arrays of labels:

```html
<div class="btn-toolbar" role="toolbar" aria-label="Pages">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
</div>
```
```tsx code
<div className="btn-toolbar" role="toolbar" aria-label="Pages">
  <div className="btn-group me-2" role="group" aria-label="First group">
    {["1", "2", "3", "4"].map((label) => (
      <button key={label} type="button" className="btn btn-secondary">
        {label}
      </button>
    ))}
  </div>
  <div className="btn-group" role="group" aria-label="Second group">
    {["5", "6", "7"].map((label) => (
      <button key={label} type="button" className="btn btn-secondary">
        {label}
      </button>
    ))}
  </div>
</div>
```

## Sizes and vertical groups

Size the whole group at once with `btn-group-sm` or `btn-group-lg`. When the buttons should stack in a column, use `btn-group-vertical`.

```html
<div class="btn-group btn-group-sm me-2" role="group" aria-label="Small group">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group-vertical" role="group" aria-label="Vertical group">
  <button type="button" class="btn btn-primary">Top</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Bottom</button>
</div>
```
```tsx code
<div className="btn-group btn-group-sm me-2" role="group" aria-label="Small group">
  <button type="button" className="btn btn-secondary">Left</button>
  <button type="button" className="btn btn-secondary">Right</button>
</div>
<div className="btn-group-vertical" role="group" aria-label="Vertical group">
  <button type="button" className="btn btn-primary">Top</button>
  <button type="button" className="btn btn-primary">Middle</button>
  <button type="button" className="btn btn-primary">Bottom</button>
</div>
```

## Dropdown in a group

A group can end in a dropdown for options that do not need a button of their own. A dropdown button is a `Dropdown` with the `btn-group` class, as in the buttons demo. See [Dropdowns](/react/docs/components/dropdowns/) for its props:

```tsx
import { Dropdown, DropdownMenu, DropdownToggle } from "@/components/bootstrap/dropdown";

<Dropdown className="btn-group">
  <DropdownToggle as="button" type="button" className="btn btn-primary dropdown-toggle">
    Export
  </DropdownToggle>
  <DropdownMenu>
    <a className="dropdown-item" href="#">CSV</a>
    <a className="dropdown-item" href="#">PDF</a>
  </DropdownMenu>
</Dropdown>
```

## Accessibility

- Give each group `role="group"` and an `aria-label`, and a toolbar `role="toolbar"`, so screen readers announce what the buttons belong to.
- In a radio group, every input has a unique `id` and its `label` points at it with `htmlFor`. The arrow keys move between the options of one `name`.
- A group of toggle buttons without inputs sets `aria-pressed` on each button from state, as on the [Buttons](/react/docs/components/buttons/#toggle-buttons) page.

## Related

- [Next.js Bootstrap button group](/nextjs/docs/components/button-group/): the same markup in AdminKit for Next.js
- [Bootstrap 5 button group](/bootstrap/docs/components/button-group/): the button group of the HTML version
- [Buttons](/react/docs/components/buttons/): colors, sizes and states of a single button
- [Buttons demo](https://react-demo.adminkit.io/ui-buttons)

---

Canonical HTML page: https://adminkit.io/react/docs/components/button-group/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io