Button Group

Button Group

<ButtonGroup> glues buttons into one control: inner borders collapse and only the outer corners stay rounded. Its whole API is size, vertical and an aria-label, and it composes with dropdowns through as, the prop every React Bootstrap 126 component accepts to change what it renders as.

The version you reach for more often is <ToggleButtonGroup>, which turns the same row into a radio or checkbox control with state. Each <ToggleButton> needs an id, because it renders a real <input> behind the label, and that hidden input is what makes the group keyboard-navigable and readable by assistive technology.

A nested dropdown, and a segmented control from a radio toggle groupXML

// every component here is a named export of 'react-bootstrap'
<ButtonGroup aria-label="Page size">
  <Button variant="outline-secondary">10</Button>
  <Button variant="outline-secondary">25</Button>
  <DropdownButton as={ButtonGroup} title="More" variant="outline-secondary" id="more">
    <Dropdown.Item eventKey="50">50 per page</Dropdown.Item>
  </DropdownButton>
</ButtonGroup>
<ToggleButtonGroup type="radio" name="sort" value={value} onChange={onChange}>
  <ToggleButton id="s-new" value="new" variant="outline-primary">Newest</ToggleButton>
  <ToggleButton id="s-price" value="price" variant="outline-primary">Price</ToggleButton>
</ToggleButtonGroup>

type="radio" hands onChange the selected value; type="checkbox" hands it an array. Omit value and the group keeps its own state — the uncontrollable package React Bootstrap depends on implements exactly that pattern, so one component works controlled or uncontrolled without two APIs.

MENU