Skip to main content
live This is a new website – your feedback will help us to improve it.

Button group

Overview

Use the .bsk-btn-group class to combine buttons together into groups. Use the .bsk-btn-toolbar class to combine groups together into toolbars.

For assistive technologies, all button groups and toolbars should use a aria-label or aria-labelledby and role=group or role=toolbar attribute to describe themselves.

Variants

Default button group

Groups contain buttons.

<div class="bsk-btn-group" role="group" aria-label="Button group example 1">
  <button type="button" class="bsk-btn bsk-btn-default">One</button>
  <button type="button" class="bsk-btn bsk-btn-default">Two</button>
  <button type="button" class="bsk-btn bsk-btn-default">Three</button>
</div>

Default button toolbar

Toolbars contain groups.

<div class="bsk-btn-toolbar" role="toolbar" aria-label="Button toolbar example 1">
  <div class="bsk-btn-group" role="group" aria-label="Button group example 2">
    <button type="button" class="bsk-btn bsk-btn-default">One</button>
    <button type="button" class="bsk-btn bsk-btn-default">Two</button>
    <button type="button" class="bsk-btn bsk-btn-default">Three</button>
  </div>
  <div class="bsk-btn-group" role="group" aria-label="Button group example 3">
    <button type="button" class="bsk-btn bsk-btn-default">One</button>
    <button type="button" class="bsk-btn bsk-btn-default">Two</button>
    <button type="button" class="bsk-btn bsk-btn-default">Three</button>
  </div>
</div>

Sizes

Add one of these classes to alter the size of a button group:

Button Group Size Button Group Size Class
Large .bsk-btn-group-lg
Small .bsk-btn-group-sm
Extra-small .bsk-btn-group-xl

Individual buttons will inherit the size of each button group.







<!-- Large button group -->
<div class="bsk-btn-group bsk-btn-group-lg" role="group" aria-label="Large button group example 1">
  <button type="button" class="bsk-btn bsk-btn-default">One</button>
  <button type="button" class="bsk-btn bsk-btn-default">Two</button>
  <button type="button" class="bsk-btn bsk-btn-default">Three</button>
</div>
<br /><br />

<!-- Regular button group -->
<div class="bsk-btn-group" role="group" aria-label="Regular button group example 4">
  <button type="button" class="bsk-btn bsk-btn-default">One</button>
  <button type="button" class="bsk-btn bsk-btn-default">Two</button>
  <button type="button" class="bsk-btn bsk-btn-default">Three</button>
</div>
<br /><br />

<!-- Small button group -->
<div class="bsk-btn-group bsk-btn-group-sm" role="group" aria-label="Small button group example 1">
  <button type="button" class="bsk-btn bsk-btn-default">One</button>
  <button type="button" class="bsk-btn bsk-btn-default">Two</button>
  <button type="button" class="bsk-btn bsk-btn-default">Three</button>
</div>
<br /><br />

<!-- Extra-small button group -->
<div class="bsk-btn-group bsk-btn-group-xs" role="group" aria-label="Extra-small button group example 1">
  <button type="button" class="bsk-btn bsk-btn-default">One</button>
  <button type="button" class="bsk-btn bsk-btn-default">Two</button>
  <button type="button" class="bsk-btn bsk-btn-default">Three</button>
</div>

Layouts

Nested button group

Button groups can be nested to include drop-down menus with buttons in a group.

<div class="bsk-btn-group" role="group" aria-label="Button group example 5">
  <button type="button" class="bsk-btn bsk-btn-default">One</button>
  <button type="button" class="bsk-btn bsk-btn-default">Two</button>
  <div class="bsk-btn-group" role="group" aria-label="Button group example 5 drop-down 1">
    <button type="button" class="bsk-btn bsk-btn-default bsk-dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="bsk-caret"></span>
    </button>
    <ul class="bsk-dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
    </ul>
  </div>
</div>

Vertical button group

Use the .bsk-btn-group-vertical class instead of .bsk-btn-group to stack buttons vertically.

Split button drop-downs and button toolbars are not supported in vertical button groups.

<div class="bsk-btn-group-vertical" role="group" aria-label="Button group example 6">
  <button type="button" class="bsk-btn bsk-btn-default">One</button>
  <button type="button" class="bsk-btn bsk-btn-default">Two</button>
  <div class="bsk-btn-group" role="group" aria-label="Button group example 6 drop-down 1">
    <button type="button" class="bsk-btn bsk-btn-default bsk-dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="bsk-caret"></span>
    </button>
    <ul class="bsk-dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
    </ul>
  </div>
</div>

Justified button group

Add the .bsk-btn-group-justified class to display equally sized buttons filling the width of the button group element.

For button groups using <a> button elements, justified button groups will work as expected.

One Two 
<div class="bsk-btn-group bsk-btn-group-justified" role="group" aria-label="Button group example 7">
  <a role="button" class="bsk-btn bsk-btn-default">One</a>
  <a role="button" class="bsk-btn bsk-btn-default">Two</a>
  <div class="bsk-btn-group" role="group" aria-label="Button group example 7 drop-down 1">
    <button type="button" class="bsk-btn bsk-btn-default bsk-dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="bsk-caret"></span>
    </button>
    <ul class="bsk-dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
    </ul>
  </div>
</div>

For button groups using <button> button elements, each button must nest each button in a .bsk-btn-group otherwise it won’t be correctly aligned or styled.

<div class="bsk-btn-group bsk-btn-group-justified" role="group" aria-label="Button group example 8">
  <div class="bsk-btn-group" role="group" aria-label="Button group example 8 wrapper 1">
    <button type="button" class="bsk-btn bsk-btn-default">One</button>
  </div>
  <div class="bsk-btn-group" role="group" aria-label="Button group example 8 wrapper 2">
    <button type="button" class="bsk-btn bsk-btn-default">Two</button>
  </div>
  <div class="bsk-btn-group" role="group" aria-label="Button group example 8 drop-down 1">
    <button type="button" class="bsk-btn bsk-btn-default bsk-dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="bsk-caret"></span>
    </button>
    <ul class="bsk-dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
    </ul>
  </div>
</div>