CSS for visually grouping buttons.

Read more about SUIT's design principles.

• Component(1): component install suitcss/components-button-group
• npm: npm install suitcss-components-button-group
• Bower: bower install suit-components-button-group

• ButtonGroup - The core component.
• ButtonGroup--hz - Horizontally arranged buttons.
• ButtonGroup-item - A ButtonGroup sub-object used to contain buttons.

The plugin file provides the following classes:

• ButtonGroup--borderCollapse - Collapse the borders between buttons.

• --font-size-ButtonGroup - The font-size to use. Defaults to 1rem.

An element with the ButtonGroup class must be used to wrap a collection of elements with the ButtonGroup-item class. The ButtonGroup component must only contain ButtonGroup-item components as children.

The button group items must contain Button components.

<div class="ButtonGroup">
  <div class="ButtonGroup-item">
    <a class="Button" href="{{url}}">Dashboard</a>
  </div>
  <div class="ButtonGroup-item">
    <a class="Button" href="{{url}}">Settings</a>
  </div>
  <div class="ButtonGroup-item">
    <a class="Button" href="{{url}}">
      Account
      <span class="Icon Icon--cog"></span>
    </a>
  </div>
</div>

Install Node (comes with npm).

npm install

To generate a build:

npm run build

To generate the testing build.

npm run build-test

Basic visual tests are in test.html.

• Google Chrome (latest)
• Opera (latest)
• Firefox 4+
• Safari 5+
• Internet Explorer 9+