Styleguides

Shared Assets & Docs

Menu

Button groups are great when you need to display a group of actions in a bar.

Add .button-group to a <ul> to create a standard button group.

<ul class="button-group">
  <li><a href="#" class="button">Button</a></li>
  <li><a href="#" class="button is-disabled">Disabled</a></li>
  <li><a href="#" class="button is-active">Active</a></li>
  ...
</ul>
<div class="button-group">
  <a href="#" class="button">Button</a>
  <a href="#" class="button is-disabled">Disabled</a>
  <a href="#" class="button is-active">Active</a>
  ...
</div>

Button Group Alignment

You can align button groups using the standard .text-left, .text-center, and .text-right classes.

<ul class="button-group text-left">...</ul>
<ul class="button-group text-center">...</ul>
<ul class="button-group text-right">...</ul>

Sizes

There are two other sizes for button groups, just like for buttons, .small-button-group and .big-button-group.

<ul class="button-group small-button-group">...</ul>
<ul class="button-group">...</ul>
<ul class="button-group big-button-group">...</ul>

Colors

...

<ul class="button-group">...</ul>
<ul class="button-group alt-button-group">...</ul>
<ul class="button-group primary-button-group">...</ul>
<ul class="button-group alert-button-group">...</ul>

Full Button Groups

You can create button groups that expand to fill their container with .two-button-group, .three-button-group, and .four-button-group classes.

<ul class="button-group two-button-group">...</ul>
<ul class="button-group three-button-group">...</ul>
<ul class="button-group four-button-group">...</ul>

Split Dropdown Button Groups

You can easily create a split button group by adding an additional button and a .split-button-group class.

<div class="button-group dropdown">
  <a href="#" class="button">Dropdown</a>
  <a href="javascript:void(0)" class="button dropdown-button" data-toggle="dropdown"><i class="icon-caret-down"></i></a>
  <ul class="dropdown-menu full-dropdown-menu">
    <li><a href="#">Link</a></li>
    ...
  </ul>
</div>