Button groups :: Digital Pattern Library

Button groups

You can combine buttons together in a btn-group. This will join the buttons together seamlessly (as long as they're all the same size. Otherwise, results can be unpredictable).

<div class="c-btn-group"><button class="c-btn c-btn--tiny"><i class="c-icon c-icon--chevron-left c-icon--before"></i>Back</button><button class="c-btn c-btn--tiny">Help</button><button class="c-btn c-btn--tiny">Next<i class="c-icon c-icon--chevron-right c-icon--after"></i></button></div>
<div class="c-btn-group"><button class="c-btn c-btn--small"><i class="c-icon c-icon--chevron-left c-icon--before"></i>Back</button><button class="c-btn c-btn--small">Help</button><button class="c-btn c-btn--small">Next<i class="c-icon c-icon--chevron-right c-icon--after"></i></button></div>
<div class="c-btn-group"><button class="c-btn c-btn--medium"><i class="c-icon c-icon--chevron-left c-icon--before"></i>Back</button><button class="c-btn c-btn--medium">Help</button><button class="c-btn c-btn--medium">Next<i class="c-icon c-icon--chevron-right c-icon--after"></i></button></div>
<div class="c-btn-group"><button class="c-btn c-btn--large"><i class="c-icon c-icon--chevron-left c-icon--before"></i>Back</button><button class="c-btn c-btn--large">Help</button><button class="c-btn c-btn--large">Next<i class="c-icon c-icon--chevron-right c-icon--after"></i></button></div>
<div class="c-btn-group"><button class="c-btn c-btn--huge"><i class="c-icon c-icon--chevron-left c-icon--before"></i>Back</button><button class="c-btn c-btn--huge">Help</button><button class="c-btn c-btn--huge">Next<i class="c-icon c-icon--chevron-right c-icon--after"></i></button></div>

Block buttons groups

If you specify a .btn-group as a .btn-group block, it will expand to fill the width of the containing element and equally divide the space between the buttons N.B. only works in IE8+ and for up to 8 buttons

Use these advisedly: consider adding in an icon-above in addition to, or replacing text if space is tight. And remember, sometimes the best icon is a word.

<div class="c-btn-group c-btn-group--block"><button class="c-btn c-btn--huge">1</button><button class="c-btn c-btn--huge">2</button></div>
<div class="c-btn-group c-btn-group--block"><button class="c-btn c-btn--large">1</button><button class="c-btn c-btn--large">2</button><button class="c-btn c-btn--large">3</button></div>
<div class="c-btn-group c-btn-group--block"><button class="c-btn c-btn--medium">1</button><button class="c-btn c-btn--medium">2</button><button class="c-btn c-btn--medium">3</button><button class="c-btn c-btn--medium">4</button></div>
<div class="c-btn-group c-btn-group--block"><button class="c-btn c-btn--small">1</button><button class="c-btn c-btn--small">2</button><button class="c-btn c-btn--small">3</button><button class="c-btn c-btn--small">4</button><button class="c-btn c-btn--small">5</button></div>
<div class="c-btn-group c-btn-group--block"><button class="c-btn c-btn--tiny">1</button><button class="c-btn c-btn--tiny">2</button><button class="c-btn c-btn--tiny">3</button><button class="c-btn c-btn--tiny">4</button><button class="c-btn c-btn--tiny">5</button><button class="c-btn c-btn--tiny">6</button></div>
<div class="c-btn-group c-btn-group--block"><button class="c-btn c-btn--medium"><i class="c-icon c-icon--camera"></i></button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--car"></i></button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--ban"></i></button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--bookmark"></i></button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--eye"></i></button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--music"></i></button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--newspaper-o"></i></button></div>
<div class="c-btn-group c-btn-group--block"><button class="c-btn c-btn--medium"><i class="c-icon c-icon--above c-icon--camera"></i>Camera</button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--above c-icon--car"></i>Car</button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--above c-icon--ban"></i>Ban</button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--above c-icon--bookmark"></i>Bookmark</button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--above c-icon--envelope-o"></i>Envelope</button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--above c-icon--eye"></i>Eye</button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--above c-icon--music"></i>Music</button><button class="c-btn c-btn--medium"><i class="c-icon c-icon--above c-icon--newspaper-o"></i>Newspaper</button></div>

Selectable buttons groups

checkbox and radio

Yes Maybe No

<div class="c-btn-group c-btn-group--block"><input type="checkbox" id="chk1" name="checkboxExample" class="c-btn--selectable" value="Car Parks">
  <label for="chk1" class="c-btn  c-btn--secondary c-btn--medium c-btn--selectable__label" role="button"><i class="c-icon c-icon--above c-icon--car"></i>Car Parks</label>
  <input type="checkbox" id="chk2" name="checkboxExample" class="c-btn--selectable" value="Bike Racks">
  <label for="chk2" class="c-btn  c-btn--secondary c-btn--medium c-btn--selectable__label" role="button"><i class="c-icon c-icon--above c-icon--bicycle"></i>Bike Racks</label>
  <input type="checkbox" id="chk3" name="checkboxExample" class="c-btn--selectable" value="Bus Stops">
  <label for="chk3" class="c-btn  c-btn--secondary c-btn--medium c-btn--selectable__label" role="button"><i class="c-icon c-icon--above c-icon--bus"></i>Bus Stops</label>
  <input type="checkbox" id="chk4" name="checkboxExample" class="c-btn--selectable" value="Cash Points">
  <label for="chk4" class="c-btn  c-btn--secondary c-btn--medium c-btn--selectable__label" role="button"><i class="c-icon c-icon--above c-icon--money"></i>Cash Points</label>
  <input type="checkbox" id="chk5" name="checkboxExample" class="c-btn--selectable" value="Available PC's">
  <label for="chk5" class="c-btn  c-btn--secondary c-btn--medium c-btn--selectable__label" role="button"><i class="c-icon c-icon--above c-icon--desktop"></i>Available PC's</label>
  <input type="checkbox" id="chk6" name="checkboxExample" class="c-btn--selectable" value="Shops">
  <label for="chk6" class="c-btn  c-btn--secondary c-btn--medium c-btn--selectable__label" role="button"><i class="c-icon c-icon--above c-icon--shopping-basket"></i>Shops</label>
</div>
<div class="c-btn-group"><input type="radio" id="rd2" name="radioExample" class="c-btn--selectable" value="Yes">
  <label for="rd2" class="c-btn  c-btn--success c-btn--medium c-btn--selectable__label" role="button"><i class="c-icon c-icon--above c-icon--check"></i>Yes</label>
  <input type="radio" id="rd3" name="radioExample" class="c-btn--selectable" value="Maybe">
  <label for="rd3" class="c-btn  c-btn--secondary c-btn--medium c-btn--selectable__label" role="button"><i class="c-icon c-icon--above c-icon--question"></i>Maybe</label>
  <input type="radio" id="rd4" name="radioExample" class="c-btn--selectable" value="No">
  <label for="rd4" class="c-btn  c-btn--danger c-btn--medium c-btn--selectable__label" role="button"><i class="c-icon c-icon--above c-icon--close"></i>No</label>
</div>

Options

button-group
- atoms: an array of buttons
- block: (Boolean) defaults to false