Examples

        <%= 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'],
                { button => ['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'],
                { button => ['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,
                  button => ['Dropup 1', caret],
                  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.

Link 1 Link 2

        <%= buttongroup
            buttons => [
                ['Link 1', ['http://www.example.com/'] ],
                { button => [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`.

Link 1

        <%= buttongroup { button => ['Default', caret],
                          items  => [
                              ['Item 1', ['item1'] ],
                              ['Item 2', ['item2'] ],
                              [],
                              ['Item 3', ['item3'] ],
                          ],
                        }
        %>

        <%= buttongroup { button => ['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.