Groups a series of buttons together on a single line.
import Button from 'react-bootstrap/Button'
import ButtonGroup from 'react-bootstrap/ButtonGroup'
{/* Solid button group */}
<ButtonGroup aria-label='Solid button group'>
<Button variant='primary'>Left</Button>
<Button variant='primary'>Middle</Button>
<Button variant='primary'>Right</Button>
</ButtonGroup>
{/* Outline button group */}
<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>
{/* Pill solid button group */}
<ButtonGroup aria-label='Pill solid button group'>
<Button variant='secondary rounded-pill rounded-end-0'>Left</Button>
<Button variant='secondary'>Middle</Button>
<Button variant='secondary rounded-pill rounded-start-0'>Right</Button>
</ButtonGroup>
{/* Pill outline button group */}
<ButtonGroup aria-label='Pill outline button group'>
<Button variant='outline-primary rounded-pill rounded-end-0'>Left</Button>
<Button variant='outline-primary'>Middle</Button>
<Button variant='outline-primary rounded-pill rounded-start-0'>Right</Button>
</ButtonGroup>
import Button from 'react-bootstrap/Button'
import ButtonGroup from 'react-bootstrap/ButtonGroup'
import ButtonToolbar from 'react-bootstrap/ButtonToolbar'
{/* Toolbar example */}
<ButtonToolbar aria-label='Settings toolbar'>
<ButtonGroup className='mb-2 me-2'>
<Button variant='dark btn-icon'>
<i className='fi-settings'></i>
</Button>
<Button variant='secondary btn-icon'>A</Button>
<Button variant='secondary btn-icon'>
<i className='fi-align-right'></i>
</Button>
<Button variant='secondary btn-icon'>
<i className='fi-rotate-right'></i>
</Button>
</ButtonGroup>
<ButtonGroup className='mb-2 me-2'>
<Button variant='success'>
<i className='fi-check me-2'></i>
Apply
</Button>
</ButtonGroup>
<ButtonGroup className='mb-2'>
<Button variant='translucent-danger btn-icon'>
<i className='fi-trash'></i>
</Button>
</ButtonGroup>
</ButtonToolbar>
{/* Pagination example */}
<ButtonToolbar aria-label='Pagination'>
<ButtonGroup className='mb-2 me-2'>
<Button variant='outline-secondary'>1</Button>
<Button variant='outline-secondary'>2</Button>
<Button variant='outline-secondary'>3</Button>
</ButtonGroup>
<ButtonGroup className='mb-2 me-2'>
<Button variant='outline-secondary'>4</Button>
<Button variant='outline-secondary'>5</Button>
</ButtonGroup>
<ButtonGroup className='mb-2'>
<Button variant='outline-secondary'>6</Button>
</ButtonGroup>
</ButtonToolbar>
import Button from 'react-bootstrap/Button'
import ButtonGroup from 'react-bootstrap/ButtonGroup'
{/* Large button group */}
<ButtonGroup size='lg'>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
{/* Normal button group */}
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
{/* Small button group */}
<ButtonGroup size='sm'>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
import Button from 'react-bootstrap/Button'
import ButtonGroup from 'react-bootstrap/ButtonGroup'
import Dropdown from 'react-bootstrap/Dropdown'
import DropdownButton from 'react-bootstrap/DropdownButton'
<ButtonGroup>
<Button>1</Button>
<Button>2</Button>
<DropdownButton as={ButtonGroup} title='Dropdown'>
<Dropdown.Item eventKey='1'>Action</Dropdown.Item>
<Dropdown.Item eventKey='2'>Another action</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey='3'>Something else</Dropdown.Item>
</DropdownButton>
</ButtonGroup>