Button group

Different types of button groups.

Basic button group#

A button group is simply a div containing a list of buttons.
Add the .btn-group class to the containing div, and you'll get a button group.
All types of button are working inside a button group

<div class="btn-group">
  <button class="btn airforce dark-2">Button</button>
  <button class="btn airforce dark-2">Button</button>
  <button class="btn airforce dark-2">Button</button>
</div>

Different button styles#

You can use any color from the color palette and any utilities to custom your button group.

<div class="btn-group">
  <button class="btn error">Button</button>
  <button class="btn airforce dark-2">Button</button>
  <button class="btn blue">Button</button>
</div>

Button group sizes#

We provide 3 button groups sizes, which are the same as the button sizes.
The basic size is set using the .btn-group class. You can use .btn-group-small, and .btn-group-large classes too.

<!-- Small button group -->
<div class="btn-group btn-group-small">
  <button class="btn airforce dark-2">Button</button>
  <button class="btn airforce dark-2">Button</button>
  <button class="btn airforce dark-2">Button</button>
</div>

<!-- Large button group -->
<div class="btn-group btn-group-large">
  <button class="btn airforce dark-2">Button</button>
  <button class="btn airforce dark-2">Button</button>
</div>

Vertical button group#

The .btn-group-vertical class allows you to create a vertical button group.

<!-- Large vertical button group -->
<div class="btn-group btn-group-vertical btn-group-large">
  <button class="btn airforce dark-2">Button 1</button>
  <button class="btn airforce dark-2">Button 2</button>
  <button class="btn airforce dark-2">Button 3</button>
</div>

<!-- Small vertical button group -->
<div class="btn-group btn-group-vertical btn-group-small">
  <button class="btn airforce dark-2">Button 1</button>
  <button class="btn airforce dark-2">Button 2</button>
  <button class="btn airforce dark-2">Button 3</button>
</div>

Rounded button group#

The rounded button group will apply border-radius to specific corners.
You can use the rounded classes, the right corners will be rounded for both vertical and horizontal button groups.

<div class="btn-group btn-group-vertical rounded-1">
  <button class="btn airforce dark-2">Button 1</button>
  <button class="btn airforce dark-2">Button 2</button>
  <button class="btn airforce dark-2">Button 3</button>
</div>

<div class="btn-group rounded-2">
  <button class="btn airforce dark-2">Button 1</button>
  <button class="btn airforce dark-2">Button 2</button>
  <button class="btn airforce dark-2">Button 3</button>
</div>

Outline button group#

The outline buttons are working in the button group component too.

<div class="btn-group btn-group-small rounded-2">
  <button class="btn btn-outline text-airforce"><span class="btn-outline-text">btn</span></button>
  <button class="btn btn-outline text-airforce"><span class="btn-outline-text">btn</span></button>
  <button class="btn btn-outline text-airforce"><span class="btn-outline-text">btn</span></button>
</div>

<div class="btn-group rounded-2">
  <button class="btn btn-outline text-airforce"><span class="btn-outline-text">btn</span></button>
  <button class="btn btn-outline text-airforce"><span class="btn-outline-text">btn</span></button>
  <button class="btn btn-outline text-airforce"><span class="btn-outline-text">btn</span></button>
</div>

<div class="btn-group btn-group-large rounded-2">
  <button class="btn btn-outline text-airforce"><span class="btn-outline-text">btn</span></button>
  <button class="btn btn-outline text-airforce"><span class="btn-outline-text">btn</span></button>
  <button class="btn btn-outline text-airforce"><span class="btn-outline-text">btn</span></button>
</div>