Button Group
Button group is designed to group buttons have similiar functions together.
Horizontal Button Group
Add the .btns-x class to a container, then wrap buttons inside
to create a horizontal button group.
<div class="btns-x">
<button class="btn btn-primary">One</button>
<button class="btn btn-primary">Two</button>
<button class="btn btn-primary">Three</button>
</div>
<div class="btns-x">
<div class="btn-check btn-hollow-primary">
<input type="checkbox" id="example1" name="example1" value="example">
<label for="example1">Check</label>
</div>
<div class="btn-radio btn-hollow-primary">
<input type="radio" id="example12" name="example2" value="example">
<label for="example2">Radio</label>
</div>
<div class="btn-file btn-hollow-primary">
<input type="file" id="example3" name="example3">
<label for="example3">File</label>
</div>
</div>
Vertical Button Group
Add the .btns-y class to a container, then wrap buttons inside
to create a vertical button group.
<div class="btns-y">
<button class="btn btn-ico-left btn-hollow-secondary">One <i class="ico ico-plus"></i></button>
<button class="btn btn-ico-left btn-hollow-secondary">Two <i class="ico ico-cross"></i></button>
<button class="btn btn-ico-left btn-hollow-secondary">Three <i class="ico ico-search"></i></button>
<button class="btn btn-ico-left btn-hollow-secondary">Four <i class="ico ico-menu"></i></button>
</div>
<div class="btns-y">
<button class="btn btn-ico btn-primary"><i class="ico ico-up"></i></button>
<button class="btn btn-ico btn-primary"><i class="ico ico-right"></i></button>
<button class="btn btn-ico btn-primary"><i class="ico ico-down"></i></button>
<button class="btn btn-ico btn-primary"><i class="ico ico-left"></i></button>
</div>
Style Modifiers
.btns-fluidModifier
A fluid button group takes all the availiable horizontal space.
To make a fluid button group, add the .btns-fluid class to the
.btns-x container or the .btns-y container.
<div class="btns-x btns-fluid">
<button class="btn btn-ico-top btn-primary">Add <i class="ico ico-plus"></i></button>
<button class="btn btn-ico-top btn-primary">Search <i class="ico ico-search"></i></button>
<button class="btn btn-ico-top btn-primary">Delete <i class="ico ico-cross"></i></button>
</div>
<div class="btns-y btns-fluid">
<button class="btn btn-ico-left btn-hollow-secondary">Add <i class="ico ico-plus"></i></button>
<button class="btn btn-ico-left btn-hollow-secondary">Search <i class="ico ico-search"></i></button>
<button class="btn btn-ico-left btn-hollow-secondary">Delete <i class="ico ico-cross"></i></button>
</div>
.btns-marginModifier
If you want to split buttons in a button group, you can use the .btns-margin class.
This modifier adds margins at the right and bottom of wrapped buttons.
<div class="btns-y btns-margin">
<button class="btn btn-hollow-primary">One</button>
<button class="btn btn-hollow-primary">Two</button>
<button class="btn btn-hollow-primary">Three</button>
</div>
<div class="btns-x btns-margin">
<button class="btn btn-hollow-secondary">1</button>
<button class="btn btn-hollow-secondary" disabled>...</button>
<button class="btn btn-dark">5</button>
<button class="btn btn-hollow-secondary" disabled>...</button>
<button class="btn btn-hollow-secondary">9</button>
</div>
Sass Variables
$button-group-box-shadow: null !default
$button-group-buttons-margin-rem: 0 $spacing-small-rem $spacing-small-rem 0 !default
Default margins of buttons wrapped in button groups
which have the .btns-margin class.