Button Groups

A Button Group with active item

<div class="button-group">
        <button class="btn-color-gray-400">1</button>
        <button class="btn-color-gray-400">2</button>
        <button class="btn-color-gray-400">3</button>
</div>

A Button Group with highlighted item

<div class="button-group">
        <button class="btn-color-gray-400">1</button>
        <button class="btn-color-primary">2</button>
        <button class="btn-color-gray-400">3</button>
</div>

A Button Group with multiple different icon buttons

<div class="button-group">
        <button class="btn-color-action"><i class="fa-light fa-radar text-xl items-center"></i>Audit Settings<i class="fa-light fa-check text-xl items-center"></i></button>
        <button class="btn-color-primary"><i class="fa-light fa-radar text-xl items-center"></i>Audit Settings<i class="fa-light fa-check text-xl items-center"></i></button>
        <button class="btn-color-gray-900"><i class="fa-light fa-check text-xl items-center"></i>Audit Settings</button>
</div>

A Small Button Group

<div class="button-group">
        <button class="btn-color-action btn-size-sm"><i class="fa-light fa-radar  items-center"></i>Audit Settings<i class="fa-light fa-check  items-center"></i></button>
        <button class="btn-color-primary btn-size-sm"><i class="fa-light fa-radar  items-center"></i>Audit Settings<i class="fa-light fa-check  items-center"></i></button>
        <button class="btn-color-gray-900 btn-size-sm"><i class="fa-light fa-check items-center"></i></i>Audit Settings</button>
</div>

An Outline Button Group

<div class="button-group">
        <button class="btn-outline-action "><i class="fa-light fa-radar  items-center"></i>Audit Settings<i class="fa-light fa-check  items-center"></i></button>
        <button class="btn-outline-primary "><i class="fa-light fa-radar  items-center"></i>Audit Settings<i class="fa-light fa-check  items-center"></i></button>
        <button class="btn-outline-header"><i class="fa-light fa-check items-center"></i></i>Audit Settings</button>
</div>

An Outline Icon Button Group

<div class="button-group">
        <button class="btn-outline-header "><i class="fa-light fa-chevron-left items-center"></i></i></button>
        <button class="btn-outline-header "><i class="fa-light fa-chevron-right items-center"></i></i></button>
</div>

An Default Icon Button Group

<div class="button-group">
        <button class="btn-default "><i class="fa-light fa-chevron-left items-center"></i></i></button>
        <button class="btn-default "><i class="fa-light fa-chevron-right items-center"></i></i></button>
</div>