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>