AdminKitDocs
Components

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 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

<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

ClassEffect
btn-groupJoins the buttons in a row
btn-group-verticalStacks the buttons in a column
btn-group-sm, btn-group-lgSizes every button of the group, instead of btn-sm or btn-lg on each
btn-toolbarA row of button groups; space them with me-2
btn-checkHides 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:

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:

<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.

<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>

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 for its props:

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 page.

Last updated on

Buttons

React Bootstrap button markup in AdminKit: theme and outline colors, sizes, icon buttons, toggle buttons and a loading state driven by React state.

Card

React Bootstrap card markup as AdminKit uses it: header with title, body, footer, images, list groups, clickable cards and cards rendered from an array.

On this page

ExampleClassesRadio group from stateToolbarSizes and vertical groupsDropdown in a groupAccessibilityRelated