Button group

Groups a series of buttons together on a single line.

React Bootstrap docs

Basic example


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>

Button toolbar

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>

Sizing





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>

Nested dropdown

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>