Group a series of buttons together on a single line with the button group.
Basic example
Wrap a series of <Button>s in a <ButtonGroup>.
<ButtonGroup aria-label="Basic example">
<Button variant="secondary">Left</Button>
<Button variant="secondary">Middle</Button>
<Button variant="secondary">Right</Button>
</ButtonGroup>
Combine sets of <ButtonGroup>s into a <ButtonToolbar> for more complex components.
<ButtonToolbar aria-label="Toolbar with button groups">
<ButtonGroup className="mr-2" aria-label="First group">
<Button>1</Button> <Button>2</Button> <Button>3</Button> <Button>4</Button>
</ButtonGroup>
<ButtonGroup className="mr-2" aria-label="Second group">
<Button>5</Button> <Button>6</Button> <Button>7</Button>
</ButtonGroup>
<ButtonGroup aria-label="Third group">
<Button>8</Button>
</ButtonGroup>
</ButtonToolbar>Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.
<>
<ButtonToolbar className="mb-3" aria-label="Toolbar with Button groups">
<ButtonGroup className="mr-2" aria-label="First group">
<Button variant="secondary">1</Button>{' '}
<Button variant="secondary">2</Button>{' '}
<Button variant="secondary">3</Button>{' '}
<Button variant="secondary">4</Button>
</ButtonGroup>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text id="btnGroupAddon">@</InputGroup.Text>
</InputGroup.Prepend>
<FormControl
type="text"
placeholder="Input group example"
aria-label="Input group example"
aria-describedby="btnGroupAddon"
/>
</InputGroup>
</ButtonToolbar>
<ButtonToolbar
className="justify-content-between"
aria-label="Toolbar with Button groups"
>
<ButtonGroup aria-label="First group">
<Button variant="secondary">1</Button>{' '}
<Button variant="secondary">2</Button>{' '}
<Button variant="secondary">3</Button>{' '}
<Button variant="secondary">4</Button>
</ButtonGroup>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text id="btnGroupAddon2">@</InputGroup.Text>
</InputGroup.Prepend>
<FormControl
type="text"
placeholder="Input group example"
aria-label="Input group example"
aria-describedby="btnGroupAddon2"
/>
</InputGroup>
</ButtonToolbar>
</>Sizing
Instead of applying button sizing props to every button in a group, just add size prop to the <ButtonGroup>.
<>
<ButtonGroup size="lg" className="mb-2">
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
<br />
<ButtonGroup className="mb-2">
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
<br />
<ButtonGroup size="sm">
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
</>Nesting
You can place other button types within the <ButtonGroup> like <DropdownButton>s.
<ButtonGroup>
<Button>1</Button>
<Button>2</Button>
<DropdownButton as={ButtonGroup} title="Dropdown" id="bg-nested-dropdown">
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
</ButtonGroup>Vertical variation
Make a set of buttons appear vertically stacked rather than horizontally, by adding vertical to the <ButtonGroup>. Split button dropdowns are not supported here.
<ButtonGroup vertical>
<Button>Button</Button>
<Button>Button</Button>
<DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-1">
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
<Button>Button</Button>
<Button>Button</Button>
<DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-2">
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
<DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-3">
<Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>
<Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>
</DropdownButton>
</ButtonGroup>API
import ButtonGroup from 'react-bootstrap/ButtonGroup'Copy import code for the ButtonGroup component
| Name |
Type |
Default |
Description |
| as |
elementType |
<div> |
You can use a custom element type for this component. |
| role |
string |
'group' |
An ARIA role describing the button group. Usually the default "group" role is fine. An aria-label or aria-labelledby prop is also recommended. |
| size |
'sm' | 'lg'
|
|
Sets the size for all Buttons in the group. |
| toggle |
boolean |
false |
Display as a button toggle group. (Generally it's better to use ToggleButtonGroup directly)
|
| vertical |
boolean |
false |
Make the set of Buttons appear vertically stacked. |
| bsPrefix |
string |
'btn-group' |
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. |
import ButtonToolbar from 'react-bootstrap/ButtonToolbar'Copy import code for the ButtonToolbar component
| Name |
Type |
Default |
Description |
| role |
string |
'toolbar' |
The ARIA role describing the button toolbar. Generally the default "toolbar" role is correct. An aria-label or aria-labelledby prop is also recommended. |
| bsPrefix |
string |
'btn-toolbar' |
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. |