Component CSS for button-groups (DEPRECATED)
Latest commit 3262a8b Nov 20, 2015 @simonsmith simonsmith Deprecate
Fix #10
Failed to load latest commit information.
.gitignore Ignore directories created by Component(1) Oct 22, 2013
.travis.yml Add Travis CI config Oct 17, 2013 2.2.0 May 15, 2014 Initial public release Oct 5, 2012 Deprecate Nov 20, 2015
bower.json 2.2.0 May 15, 2014
button-group.css 2.2.0 May 15, 2014
button-group.plugin.css 2.2.0 May 15, 2014
component.json 2.2.0 May 15, 2014
package.json 2.2.0 May 15, 2014
test.html Add viewport meta tag to test.html Apr 5, 2014


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

Available classes

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

Configurable variables

  • --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 class="ButtonGroup-item">
    <a class="Button" href="{{url}}">Settings</a>
  <div class="ButtonGroup-item">
    <a class="Button" href="{{url}}">
      <span class="Icon Icon--cog"></span>


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.

Browser support

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