React Bootstrap docs

Button group

Group a series of buttons together on a single line or stack them in a vertical column.

Basic example

import ButtonGroup from 'react-bootstrap/ButtonGroup'
import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'

export default function ButtonGroupBasicDemo() {
  return (
    <Stack direction="vertical" gap={3}>
      <ButtonGroup aria-label="Solid button group">
        <Button variant="primary">Left</Button>
        <Button variant="primary">Middle</Button>
        <Button variant="primary">Right</Button>
      </ButtonGroup>

      <ButtonGroup aria-label="Outline button group">
        <Button variant="outline-primary">Left</Button>
        <Button variant="outline-primary">Middle</Button>
        <Button variant="outline-primary">Right</Button>
      </ButtonGroup>

      <ButtonGroup aria-label="Pill solid button group">
        <Button variant="secondary" className="rounded-pill rounded-end-0">Left</Button>
        <Button variant="secondary">Middle</Button>
        <Button variant="secondary" className="rounded-pill rounded-start-0">Right</Button>
      </ButtonGroup>

      <ButtonGroup aria-label="Pill outline button group">
        <Button variant="outline-secondary" className="rounded-pill rounded-end-0">Left</Button>
        <Button variant="outline-secondary">Middle</Button>
        <Button variant="outline-secondary" className="rounded-pill rounded-start-0">Right</Button>
      </ButtonGroup>
    </Stack>
  )
}

Checkboxes and radio buttons


import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'
import ToggleButton from 'react-bootstrap/ToggleButton'
import Stack from 'react-bootstrap/Stack'

export default function ButtonGroupCheckboxesDemo() {
  return (
    <Stack direction="vertical" gap={3}>
      <ToggleButtonGroup type="checkbox" className="mb-3" aria-label="Checkbox toggle button group">
        <ToggleButton variant="outline-primary" id="btncheck1" value="Check 1">
          Check 1
        </ToggleButton>
        <ToggleButton variant="outline-primary" id="btncheck2" value="Check 2">
          Check 2
        </ToggleButton>
        <ToggleButton variant="outline-primary" id="btncheck3" value="Check 3">
          Check 3
        </ToggleButton>
      </ToggleButtonGroup>

      <ToggleButtonGroup
        type="radio"
        name="btnradio"
        defaultValue="Radio 1"
        aria-label="Radio toggle button group"
      >
        <ToggleButton variant="outline-primary" id="btnradio1" value="Radio 1">
          Radio 1
        </ToggleButton>
        <ToggleButton variant="outline-primary" id="btnradio2" value="Radio 2">
          Radio 2
        </ToggleButton>
        <ToggleButton variant="outline-primary" id="btnradio3" value="Radio 3">
          Radio 3
        </ToggleButton>
      </ToggleButtonGroup>
    </Stack>
  )
}

Button toolbar

import ButtonToolbar from 'react-bootstrap/ButtonToolbar'
import ButtonGroup from 'react-bootstrap/ButtonGroup'
import Button from 'react-bootstrap/Button'

export default function ButtonGroupToolbarDemo() {
  return (
    <>
      <ButtonToolbar className="gap-2" aria-label="Settings toolbar">
        <ButtonGroup aria-label="Settings group">
          <Button variant="dark" className="btn-icon fs-base" aria-label="Settings">
            <i className="ci-settings"/>
          </Button>
          <Button variant="secondary" className="btn-icon fs-base">
            A
          </Button>
          <Button variant="secondary" className="btn-icon fs-lg" aria-label="List">
            <i className="ci-list"/>
          </Button>
          <Button variant="secondary" className="btn-icon fs-base" aria-label="Expand">
            <i className="ci-maximize"/>
          </Button>
        </ButtonGroup>
        <ButtonGroup aria-label="Apply settings">
          <Button variant="success" aria-label="List">
            <i className="ci-check fs-base ms-n1 me-2"/>
            Apply
          </Button>
        </ButtonGroup>
        <ButtonGroup aria-label="Delete settings">
          <Button variant="outline-danger" className="btn-icon fs-lg" aria-label="Delete">
            <i className="ci-trash"/>
          </Button>
        </ButtonGroup>
      </ButtonToolbar>

      <ButtonToolbar className="gap-2 mt-3" aria-label="Pagination">
        <ButtonGroup aria-label="First group">
          <Button variant="outline-secondary">1</Button>
          <Button variant="outline-secondary">2</Button>
          <Button variant="outline-secondary">3</Button>
        </ButtonGroup>
        <ButtonGroup aria-label="Seconf group">
          <Button variant="outline-secondary">4</Button>
          <Button variant="outline-secondary">5</Button>
        </ButtonGroup>
        <ButtonGroup aria-label="Third group">
          <Button variant="outline-secondary">5</Button>
        </ButtonGroup>
      </ButtonToolbar>
    </>
  )
}

Nested dropdown

import ButtonGroup from 'react-bootstrap/ButtonGroup'
import Button from 'react-bootstrap/Button'
import DropdownButton from 'react-bootstrap/DropdownButton'
import DropdownItem from 'react-bootstrap/DropdownItem'

export default function ButtonGroupDropdownDemo() {
  return (
    <ButtonGroup cla aria-label="Button group with nested dropdown">
      <Button variant="outline-secondary">1</Button>
      <Button variant="outline-secondary">2</Button>
      <DropdownButton as={ButtonGroup} variant="outline-secondary" title="Dropdown" id="bg-nested-dropdown">
        <DropdownItem eventKey="1">Dropdown link</DropdownItem>
        <DropdownItem eventKey="2">Dropdown link</DropdownItem>
        <DropdownItem eventKey="3">Dropdown link</DropdownItem>
      </DropdownButton>
    </ButtonGroup>
  )
}

Sizing

import ButtonGroup from 'react-bootstrap/ButtonGroup'
import Button from 'react-bootstrap/Button'
import Stack from 'react-bootstrap/Stack'

export default function ButtonGroupSizingDemo() {
  return (
    <Stack direction="vertical" gap={3}>
      <ButtonGroup size="lg" aria-label="Large button group">
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>

      <ButtonGroup aria-label="Normal button group">
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>

      <ButtonGroup size="sm" aria-label="Small button group">
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
    </Stack>
  )
}

Vertical

import ButtonGroup from 'react-bootstrap/ButtonGroup'
import Button from 'react-bootstrap/Button'

export default function ButtonGroupVerticalDemo() {
  return (
    <ButtonGroup vertical aria-label="Vertical button group">
      <Button>Button</Button>
      <Button>Button</Button>
      <Button>Button</Button>
      <Button>Button</Button>
    </ButtonGroup>
  )
}
Top