# Button groups ButtonGroup, ButtonToolbar

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 />.


          const buttonsInstance = (
            <ButtonGroup>
              <Button bsStyle='blue'>Left</Button>
              <Button bsStyle='blue'>Middle</Button>
              <Button bsStyle='blue'>Right</Button>
            </ButtonGroup>
          );

          
        

# Button toolbar

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


          const buttonsInstance = (
            <ButtonToolbar>
              <ButtonGroup>
                <Button bsStyle='blue'>1</Button>
                <Button bsStyle='blue'>2</Button>
                <Button bsStyle='blue'>3</Button>
                <Button bsStyle='blue'>4</Button>
              </ButtonGroup>

              <ButtonGroup>
                <Button bsStyle='green'>5</Button>
                <Button bsStyle='green'>6</Button>
                <Button bsStyle='green'>7</Button>
              </ButtonGroup>

              <ButtonGroup>
                <Button bsStyle='red'>8</Button>
              </ButtonGroup>
            </ButtonToolbar>
          );

          
        

# Sizing

Instead of applying button sizing props to every button in a group, just add bsSize prop or short props (lg, sm, xs) to the <ButtonGroup />.


          const buttonsInstance = (
            <div>
              <ButtonToolbar>
                <ButtonGroup lg>
                  <Button bsStyle='blue'>Left</Button>
                  <Button bsStyle='blue'>Middle</Button>
                  <Button bsStyle='blue'>Right</Button>
                </ButtonGroup>
              </ButtonToolbar>

              <br/>

              <ButtonToolbar>
                <ButtonGroup>
                  <Button bsStyle='green'>Left</Button>
                  <Button bsStyle='green'>Middle</Button>
                  <Button bsStyle='green'>Right</Button>
                </ButtonGroup>
              </ButtonToolbar>

              <br/>

              <ButtonToolbar>
                <ButtonGroup sm>
                  <Button bsStyle='red'>Left</Button>
                  <Button bsStyle='red'>Middle</Button>
                  <Button bsStyle='red'>Right</Button>
                </ButtonGroup>
              </ButtonToolbar>

              <br/>

              <ButtonToolbar>
                <ButtonGroup bsSize="xsmall">
                  <Button bsStyle='yellow'>Left</Button>
                  <Button bsStyle='yellow'>Middle</Button>
                  <Button bsStyle='yellow'>Right</Button>
                </ButtonGroup>
              </ButtonToolbar>
            </div>
          );

          
        

# Nesting

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


          const buttonsInstance = (
            <ButtonGroup lg>
              <Button bsStyle='darkcyan'>1</Button>
              <Button bsStyle='darkcyan'>2</Button>
              <DropdownButton title="Dropdown" id="bg-nested-dropdown" bsStyle='darkcyan'>
                <MenuItem active 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 />.


          const buttonsInstance = (
            <ButtonGroup vertical>
              <Button bsStyle='darkcyan'>Button</Button>
              <Button bsStyle='darkcyan'>Button</Button>
              <DropdownButton bsStyle='darkcyan' title="Dropdown" id="bg-vertical-dropdown-1" dropup>
                <MenuItem eventKey="1">Dropdown link</MenuItem>
                <MenuItem eventKey="2" disabled>Disabled Dropdown link</MenuItem>
                <MenuItem eventKey="3">Dropdown link</MenuItem>
              </DropdownButton>
              <Button bsStyle='darkcyan'>Button</Button>
              <Button bsStyle='darkcyan'>Button</Button>
              <DropdownButton bsStyle='darkcyan' title="Dropdown" id="bg-vertical-dropdown-2">
                <MenuItem eventKey="1">Dropdown link</MenuItem>
                <MenuItem eventKey="2">Dropdown link</MenuItem>
              </DropdownButton>
              <DropdownButton bsStyle='darkcyan' title="Dropdown" id="bg-vertical-dropdown-3">
                <MenuItem eventKey="1">Dropdown link</MenuItem>
                <MenuItem eventKey="2">Dropdown link</MenuItem>
              </DropdownButton>
              <Button bsStyle='darkcyan'>Button</Button>
              <Button bsStyle='darkcyan'>Button</Button>
            </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.


          const buttonsInstance = (
            <ButtonGroup vertical block>
              <Button bsStyle='blue'>Full width button</Button>
              <Button bsStyle='blue'>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.

Just add justified to the <ButtonGroup />.


          const buttonsInstance = (
            <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>
          );

          
        

# Props

NameTypeDefaultDescription
blockbooleanfalseDisplay block buttons, only useful when used with the "vertical" prop.
bsClassstring'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.
justifiedbooleanfalse
verticalbooleanfalse