Basic
<div class="inline-flex">
<button type="button" class="btn inline-flex text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
Button
</button>
<button type="button" class="btn inline-flex text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
Button
</button>
<button type="button" class="btn inline-flex text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
Button
</button>
</div>
Icons Only
<div class="inline-flex">
<button type="button" class="btn inline-flex items-center justify-center text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
<i class="icon icon-chevron-left"></i>
</button>
<button type="button" class="btn inline-flex items-center justify-center text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark hover:bg-dark hover:text-white">
<i class="icon icon-chevron-right"></i>
</button>
</div>
With Count
<div class="inline-flex">
<button type="button" class="btn inline-flex items-center justify-center text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-gray-900">
<i class="icon icon-file me-1"></i> Invoices
</button>
</button>
<button type="button" class="btn text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-gray-900">
10
</button>
</div>
With Dropdown
<div class="inline-flex">
<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<div class="inline-flex">
<button type="button" class="btn inline-flex items-center justify-center text-sm font-semibold first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-dark">
Save Changes
</button>
<button type="button" class="hs-dropdown-toggle cursor-pointer py-1.75 px-2 inline-flex items-center gap-x-2 text-sm font-normal first:rounded-s-lg last:rounded-e-lg rounded-none border border-border-color bg-light text-gray-800 focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<i class="icon-chevron-down"></i>
</button>
</div>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color shadow rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
<div class="p-2 space-y-1">
<a class="flex items-center px-4 py-1.75 rounded-lg text-gray-900 hover:text-primary hover:bg-light focus:outline-hidden focus:bg-white" href="#">
Action
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:text-primary hover:bg-light focus:outline-hidden focus:bg-white" href="#">
Another Action
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:text-primary hover:bg-light focus:outline-hidden focus:bg-white" href="#">
Other Action
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:text-primary hover:bg-light focus:outline-hidden focus:bg-white" href="#">
Seperate Action
</a>
</div>
</div>
</div>
</div>
