Cirrus

#Button Groups

Button groups are designed to group buttons of similar actions or properties together in a seemless fashion. Buttons are placed adjacent to each other and buttons at each of the ends are rounded off respectively.

<div class="btn-group">
    <button class="btn-primary">First Button</button>
    <button class="btn-primary">Second Button</button>
    <button class="btn-primary">Third Button</button>
</div>

To make the buttons in the btn-group fill its parent container, add the btn-group-fill class to the btn-group.

<div class="btn-group btn-group-fill">
    <button class="bg-orange-200 text-orange-700">Edge</button>
    <button class="bg-orange-200 text-orange-700">To</button>
    <button class="bg-orange-200 text-orange-700">Edge</button>
</div>