Button group

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

Basic example

Wrap a series of <Button>s in a <ButtonGroup>.

结果

实时编辑器

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; function BasicExample() { return ( <ButtonGroup aria-label="Basic example"> <Button variant="secondary">Left</Button> <Button variant="secondary">Middle</Button> <Button variant="secondary">Right</Button> </ButtonGroup> ); } export default BasicExample;

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

function BasicExample() {
  return (
    <ButtonGroup aria-label="Basic example">
      <Button variant="secondary">Left</Button>
      <Button variant="secondary">Middle</Button>
      <Button variant="secondary">Right</Button>
    </ButtonGroup>
  );
}

export default BasicExample;

Button toolbar

Combine sets of <ButtonGroup>s into a <ButtonToolbar> for more complex components.

结果

实时编辑器

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; import ButtonToolbar from 'react-bootstrap/ButtonToolbar'; function ToolbarBasicExample() { return ( <ButtonToolbar aria-label="Toolbar with button groups"> <ButtonGroup className="me-2" aria-label="First group"> <Button>1</Button> <Button>2</Button> <Button>3</Button>{' '} <Button>4</Button> </ButtonGroup> <ButtonGroup className="me-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> ); } export default ToolbarBasicExample;

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

function ToolbarBasicExample() {
  return (
    <ButtonToolbar aria-label="Toolbar with button groups">
      <ButtonGroup className="me-2" aria-label="First group">
        <Button>1</Button> <Button>2</Button> <Button>3</Button>{' '}
        <Button>4</Button>
      </ButtonGroup>
      <ButtonGroup className="me-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>
  );
}

export default ToolbarBasicExample;

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.

结果

@

@

实时编辑器

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; import ButtonToolbar from 'react-bootstrap/ButtonToolbar'; import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function ToolbarExample() { return ( <> <ButtonToolbar className="mb-3" aria-label="Toolbar with Button groups"> <ButtonGroup className="me-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.Text id="btnGroupAddon">@</InputGroup.Text> <Form.Control 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.Text id="btnGroupAddon2">@</InputGroup.Text> <Form.Control type="text" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2" /> </InputGroup> </ButtonToolbar> </> ); } export default ToolbarExample;

import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function ToolbarExample() {
  return (
    <>
      <ButtonToolbar className="mb-3" aria-label="Toolbar with Button groups">
        <ButtonGroup className="me-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.Text id="btnGroupAddon">@</InputGroup.Text>
          <Form.Control
            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.Text id="btnGroupAddon2">@</InputGroup.Text>
          <Form.Control
            type="text"
            placeholder="Input group example"
            aria-label="Input group example"
            aria-describedby="btnGroupAddon2"
          />
        </InputGroup>
      </ButtonToolbar>
    </>
  );
}

export default ToolbarExample;

Sizing

Instead of applying button sizing props to every button in a group, just add size prop to the <ButtonGroup>.

结果

实时编辑器

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; function SizesExample() { return ( <> <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> </> ); } export default SizesExample;

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

function SizesExample() {
  return (
    <>
      <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>
    </>
  );
}

export default SizesExample;

Nesting

You can place other button types within the <ButtonGroup> like <DropdownButton>s.

结果

实时编辑器

import Button from 'react-bootstrap/Button'; import DropdownButton from 'react-bootstrap/DropdownButton'; import Dropdown from 'react-bootstrap/Dropdown'; function NestedExample() { return ( <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> ); } export default NestedExample;

import Button from 'react-bootstrap/Button';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';

function NestedExample() {
  return (
    <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>
  );
}

export default NestedExample;

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.

结果

实时编辑器

import Button from 'react-bootstrap/Button'; import ButtonGroup from 'react-bootstrap/ButtonGroup'; import Dropdown from 'react-bootstrap/Dropdown'; import DropdownButton from 'react-bootstrap/DropdownButton'; function VerticalExample() { return ( <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> ); } export default VerticalExample;

import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';

function VerticalExample() {
  return (
    <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>
  );
}

export default VerticalExample;

API

ButtonGroup

import ButtonGroup from 'react-bootstrap/ButtonGroup'

Name	Type	Default	Description
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.
size	'sm' | 'lg'		Sets the size for all Buttons in the group.
vertical	bool	false	Make the set of Buttons appear vertically stacked.
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.
as	elementType	'div'	You can use a custom element type for this component.

ButtonToolbar

import ButtonToolbar from 'react-bootstrap/ButtonToolbar'

Name	Type	Default	Description
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.
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.