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>
  <Button>Left</Button>
  <Button>Middle</Button>
  <Button>Right</Button>
</ButtonGroup>;

#Button toolbar

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

<ButtonToolbar>
  <ButtonGroup>
    <Button>1</Button>
    <Button>2</Button>
    <Button>3</Button>
    <Button>4</Button>
  </ButtonGroup>

  <ButtonGroup>
    <Button>5</Button>
    <Button>6</Button>
    <Button>7</Button>
  </ButtonGroup>

  <ButtonGroup>
    <Button>8</Button>
  </ButtonGroup>
</ButtonToolbar>;

#Sizing

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

<div>
  <ButtonToolbar>
    <ButtonGroup bsSize="large">
      <Button>Left</Button>
      <Button>Middle</Button>
      <Button>Right</Button>
    </ButtonGroup>
  </ButtonToolbar>

  <ButtonToolbar>
    <ButtonGroup>
      <Button>Left</Button>
      <Button>Middle</Button>
      <Button>Right</Button>
    </ButtonGroup>
  </ButtonToolbar>

  <ButtonToolbar>
    <ButtonGroup bsSize="small">
      <Button>Left</Button>
      <Button>Middle</Button>
      <Button>Right</Button>
    </ButtonGroup>
  </ButtonToolbar>

  <ButtonToolbar>
    <ButtonGroup bsSize="xsmall">
      <Button>Left</Button>
      <Button>Middle</Button>
      <Button>Right</Button>
    </ButtonGroup>
  </ButtonToolbar>
</div>;

#Nesting

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

<ButtonGroup>
  <Button>1</Button>
  <Button>2</Button>
  <DropdownButton title="Dropdown" id="bg-nested-dropdown">
    <MenuItem eventKey="1">Dropdown link</MenuItem>
    <MenuItem eventKey="2">Dropdown link</MenuItem>
  </DropdownButton>
</ButtonGroup>;

#Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.

Just add vertical to the <ButtonGroup />.

<ButtonGroup vertical>
  <Button>Button</Button>
  <Button>Button</Button>
  <DropdownButton title="Dropdown" id="bg-vertical-dropdown-1">
    <MenuItem eventKey="1">Dropdown link</MenuItem>
    <MenuItem eventKey="2">Dropdown link</MenuItem>
  </DropdownButton>
  <Button>Button</Button>
  <Button>Button</Button>
  <DropdownButton title="Dropdown" id="bg-vertical-dropdown-2">
    <MenuItem eventKey="1">Dropdown link</MenuItem>
    <MenuItem eventKey="2">Dropdown link</MenuItem>
  </DropdownButton>
  <DropdownButton title="Dropdown" id="bg-vertical-dropdown-3">
    <MenuItem eventKey="1">Dropdown link</MenuItem>
    <MenuItem eventKey="2">Dropdown link</MenuItem>
  </DropdownButton>
</ButtonGroup>;

Moreover, you can have buttons be block level elements so they take the full width of their container, just add block to the <ButtonGroup />, in addition to the vertical you just added.

<ButtonGroup vertical block>
  <Button>Full width button</Button>
  <Button>Full width button</Button>
</ButtonGroup>;

#Justified button groups

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

Style issues

There are some issues and workarounds required when using this property, please see bootstrap’s button group docs for more specifics.

Just add justified to the <ButtonGroup />.

Left Middle

<ButtonGroup justified>
  <Button href="#">Left</Button>
  <Button href="#">Middle</Button>
  <DropdownButton title="Dropdown" id="bg-justified-dropdown">
    <MenuItem eventKey="1">Dropdown link</MenuItem>
    <MenuItem eventKey="2">Dropdown link</MenuItem>
  </DropdownButton>
</ButtonGroup>;

For checkboxes or radio buttons styled as Bootstrap buttons, use the<ToggleButtonGroup> and <ToggleButton>components. The group behaves as a form component, where the value is an array of the selected eventKeys for checkbox groups or the selected eventKey for radio groups.

Bootstrap JS issue

There is a known issue when including Bootstrap JS while using Toggle Button Groups. Therefore it is advised not use Bootstrap JS in conjunction with <ToggleButtonGroup> and <ToggleButton>.

Uncontrolled

<div>
  <ButtonToolbar>
    <ToggleButtonGroup type="checkbox" defaultValue={[1, 3]}>
      <ToggleButton value={1}>Checkbox 1 (pre-checked)</ToggleButton>
      <ToggleButton value={2}>Checkbox 2</ToggleButton>
      <ToggleButton value={3}>Checkbox 3 (pre-checked)</ToggleButton>
    </ToggleButtonGroup>
  </ButtonToolbar>

  <ButtonToolbar>
    <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
      <ToggleButton value={1}>Radio 1 (pre-checked)</ToggleButton>
      <ToggleButton value={2}>Radio 2</ToggleButton>
      <ToggleButton value={3}>Radio 3</ToggleButton>
    </ToggleButtonGroup>
  </ButtonToolbar>
</div>;

Controlled

Checkbox 1 (pre-checked)Checkbox 2Checkbox 3 (pre-checked)Checkbox 4 (disabled)

class ToggleButtonGroupControlled extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: [1, 3]
    };
  }

  handleChange(e) {
    this.setState({ value: e });
  }

  render() {
    return (
      <ToggleButtonGroup
        type="checkbox"
        value={this.state.value}
        onChange={this.handleChange}
      >
        <ToggleButton value={1}>Checkbox 1 (pre-checked)</ToggleButton>
        <ToggleButton value={2}>Checkbox 2</ToggleButton>
        <ToggleButton value={3}>Checkbox 3 (pre-checked)</ToggleButton>
        <ToggleButton value={4} disabled>
          Checkbox 4 (disabled)
        </ToggleButton>
      </ToggleButtonGroup>
    );
  }
}

render(<ToggleButtonGroupControlled />);

#Props

#ButtonGroup [source]

Name	Type	Default	Description
vertical	boolean	false
justified	boolean	false
block	boolean	false	Display block buttons; only useful when used with the "vertical" prop.
bsClass	string	'btn-group'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

#ButtonToolbar [source]

Name	Type	Default	Description
bsClass	string	'btn-toolbar'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

#ToggleButtonGroup [source]

Name	Type	Default	Description
name	string		An HTML `<input>` name for each child button. Required if `type` is set to `'radio'`
value	any		controlled by: `onChange`, initial prop: `defaultValue` The value, or array of values, of the active (pressed) buttons
onChange	function		controls `values` Callback fired when a button is pressed, depending on whether the `type` is `'radio'` or `'checkbox'`, `onChange` will be called with the value or array of active values
type	one of: `'checkbox'`, `'radio'`	'radio'	The input `type` of the rendered buttons, determines the toggle behavior of the buttons

#ToggleButton [source]

Name	Type	Description
type	[type]	The `<input>` `type`
name	string	The HTML input name, used to group like checkboxes or radio buttons together semantically
checked	boolean	The checked state of the input, managed by ` automatically
disabled	boolean	The disabled state of both the label and input
onChange	function	[onChange description]
value required	any	The value of the input, and unique identifier in the ToggleButtonGroup

Components

#Button groups ButtonGroup, ButtonToolbar, ToggleButtonGroup, ToggleButton