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-[var(--border)] bg-[var(--card2)] c-text 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-[var(--border)] bg-[var(--card2)] c-text 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-[var(--border)] bg-[var(--card2)] c-text 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-[var(--border)] bg-[var(--card2)] c-text hover:bg-dark hover:text-white">
<i data-lucide="chevron-left" class="w-4 h-4"></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-[var(--border)] bg-[var(--card2)] c-text hover:bg-dark hover:text-white">
<i data-lucide="chevron-right" class="w-4 h-4"></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-[var(--border)] bg-[var(--card2)] c-text">
<i data-lucide="file" class="w-4 h-4 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-[var(--border)] bg-[var(--card2)] c-text">
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-[var(--border)] bg-[var(--surface)] 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-[var(--border)] bg-[var(--surface)] 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-[var(--card)] border border-[var(--border)] 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 c-text hover:c-gold hover:bg-[var(--surface)] focus:outline-hidden focus:bg-[var(--card)]" href="#">
Action
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm c-text hover:c-gold hover:bg-[var(--surface)] focus:outline-hidden focus:bg-[var(--card)]" href="#">
Another Action
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm c-text hover:c-gold hover:bg-[var(--surface)] focus:outline-hidden focus:bg-[var(--card)]" href="#">
Other Action
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm c-text hover:c-gold hover:bg-[var(--surface)] focus:outline-hidden focus:bg-[var(--card)]" href="#">
Seperate Action
</a>
</div>
</div>
</div>
</div>
