Usage
Use .button-group
on an element that contains two or more .button
elements to create a button group.
<div class="button-group mb-4" role="group">
<button class="button button-outline">
<svg class="svg-icon fill-current" viewBox="0 0 507 512" xmlns="http://www.w3.org/2000/svg">...</svg>
</button>
<button class="button button-outline">
<svg class="svg-icon fill-current" viewBox="0 0 507 512" xmlns="http://www.w3.org/2000/svg">...</svg>
</button>
</div>
<div class="mb-4" role="toolbar" aria-label="Toolbar with button groups">
<div class="button-group mr-2" role="group" aria-label="First group">
<button class="button button-outline">1</button>
<button class="button button-outline">2</button>
<button class="button button-outline">3</button>
<button class="button button-outline">4</button>
</div>
<div class="button-group mr-2" role="group" aria-label="Second group">
<button class="button button-outline">5</button>
<button class="button button-outline">6</button>
<button class="button button-outline">7</button>
</div>
<div class="button-group" role="group" aria-label="Third group">
<button class="button button-outline">8</button>
</div>
</div>
<div class="button-group mb-4" role="group" aria-label="Basic example">
<button class="button button-outline">Left</button>
<button class="button button-outline">Middle</button>
<button class="button button-outline">Right</button>
</div>
Sizes
Use .button-group-{size}
with an existing .button-group
to resize each .button
in the group automatically.
<div class="button-group button-group-lg" role="group" aria-label="...">...</div>
<div class="button-group" role="group" aria-label="...">...</div>
<div class="button-group button-group-sm" role="group" aria-label="...">...</div>
Variants
Use .button-group-vertical
to stack .button
elements vertically rather than horizontally.
<div class="button-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="button button-outline">Button</button>
<button type="button" class="button button-outline">Button</button>
<button type="button" class="button button-outline">Button</button>
<button type="button" class="button button-outline">Button</button>
<button type="button" class="button button-outline">Button</button>
<button type="button" class="button button-outline">Button</button>
</div>