<%= buttongroup buttons => [ ['Button 1'], ['Button 2'], ['Button 3'], ] %>
<div class="btn-group"> <button class="btn btn-default" type="button">Button 1</button> <button class="btn btn-default" type="button">Button 2</button> <button class="btn btn-default" type="button">Button 3</button> </div>A basic button group.
<%= buttongroup small, buttons => [ ['Button 1'], ['Dropdown 1', caret, items => [ ['Item 1', ['item1'] ], ['Item 2', ['item2'] ], [], ['Item 3', ['item3'] ], ] ], ['Button 2'], ['Button 3'], ], %>
<div class="btn-group btn-group-sm"> <button class="btn btn-default" type="button">Button 1</button> <div class="btn-group btn-group-sm"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown 1 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li> <li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li> <li class="divider"></li> <li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li> </ul> </div> <button class="btn btn-default" type="button">Button 2</button> <button class="btn btn-default" type="button">Button 3</button> </div>Nested button group. Note that the
small
strapping is only necessary once. The same classes are automatically applied to the nested .btn-group
.<%= buttongroup vertical, buttons => [ ['Button 1'], ['Dropdown 1', caret, items => [ ['Item 1', ['item1'] ], ['Item 2', ['item2'] ], [], ['Item 3', ['item3'] ], ] ], ['Button 2'], ['Button 3'], ], %>
<div class="btn-group-vertical"> <button class="btn btn-default" type="button">Button 1</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown 1 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li> <li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li> <li class="divider"></li> <li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li> </ul> </div> <button class="btn btn-default" type="button">Button 2</button> <button class="btn btn-default" type="button">Button 3</button> </div>Nested button group, with the
vertical
strapping.<%= buttongroup justified, buttons => [ ['Button 1'], ['Button 2'], ['Button 3'], ] %>
<div class="btn-group btn-group-justified"> <div class="btn-group"> <button class="btn btn-default" type="button">Button 1</button> </div> <div class="btn-group"> <button class="btn btn-default" type="button">Button 2</button> </div> <div class="btn-group"> <button class="btn btn-default" type="button">Button 3</button> </div> </div>A justified button group. Note the automatic (and necessary) wrapping of buttons in
.btn-groups
.<%= buttongroup justified, buttons => [ ['Link 1', ['http://www.example.com/'] ], ['Link 2', ['http://www.example.com/'] ], ['Dropup 1', caret, dropup, items => [ ['Item 1', ['item1'] ], ['Item 2', ['item2'] ], [], ['Item 3', ['item3'] ], ] ], ] %>
<div class="btn-group btn-group-justified"> <a class="btn btn-default" href="http://www.example.com/">Link 1</a> <a class="btn btn-default" href="http://www.example.com/">Link 2</a> <div class="btn-group dropup"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup 1 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li> <li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li> <li class="divider"></li> <li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li> </ul> </div> </div>Mix links and
dropup
menus in justified
button groups.<%= buttongroup buttons => [ ['Link 1', ['http://www.example.com/'] ], [undef, caret, items => [ ['Item 1', ['item1'] ], ['Item 2', ['item2'] ], [], ['Item 3', ['item3'] ], ] ], ] %>
<div class="btn-group"> <a class="btn btn-default" href="http://www.example.com/">Link 1</a> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li> <li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li> <li class="divider"></li> <li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li> </ul> </div> </div>Split button dropdowns uses the same syntax as any other multi-button dropdown. Set the
caret
button title to undef
.<%= buttongroup ['Default', caret, items => [ ['Item 1', ['item1'] ], ['Item 2', ['item2'] ], [], ['Item 3', ['item3'] ], ] ] %> <%= buttongroup ['Big danger', caret, large, danger, items => [ ['Item 1', ['item1'] ], ['Item 2', ['item2'] ], [], ['Item 3', ['item3'] ], ] ] %>
<div class="btn-group"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Default <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li> <li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li> <li class="divider"></li> <li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li> </ul> </div> <div class="btn-group"> <button class="btn btn-danger btn-lg dropdown-toggle" type="button" data-toggle="dropdown">Big danger <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li> <li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li> <li class="divider"></li> <li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li> </ul> </div>Using the shortcut to create single-button button group dropdowns.