Button Group

Source Edit this page

Group series of buttons.

Button Group

Use btn-group and btn-group__item to group buttons together.

<div class="btn-group" role="group">
	<button class="btn-group__item btn label rounded-l">Left</button>
	<button class="btn-group__item btn label">Middle</button>
	<button class="btn-group__item btn label rounded-r">Right</button>
</div>  

<div class="btn-group" role="group">
	<button class="btn-group__item btn btn-outline-tertiary label rounded-l">Yes</button>
	<button class="btn-group__item btn btn-outline-danger label">Maybe</button>
	<button class="btn-group__item btn btn-outline-tertiary label rounded-r">No</button>
</div>

Vertical Button Group

Use btn-group--vertical and btn-group__item--vertical to group buttons together vertically.

<div class="btn-group--vertical" role="group">
	<button class="btn-group__item--vertical btn label rounded-t">Figma</button>
	<button class="btn-group__item--vertical btn label">Adobe</button>
	<button class="btn-group__item--vertical btn label rounded-b">Paint</button>
</div>  

<div class="btn-group--vertical" role="group">
	<button class="btn-group__item--vertical btn btn-tertiary--inverted label rounded-t">Yes</button>
	<button class="btn-group__item--vertical btn btn-tertiary--inverted label">Maybe</button>
	<button class="btn-group__item--vertical btn btn-tertiary--inverted label rounded-b">No</button>
</div>