Button
<!-- primary -->
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">Primary</button>
<!-- warning -->
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-yellow-600">Warning</button>
<!-- danger -->
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-red-600">Danger</button>
<!-- success -->
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-green-600">Success</button>
<!-- info -->
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-sky-600">Info</button>
<!-- primary & icon -->
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">
Primary
<i class="bi bi-arrow-right"></i>
</button>
<!-- Accent btn -->
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-green-600 border border-green-700 shadow-outset-green text-green-100">
Accent
<i class="bi bi-arrow-right"></i>
</button>
Button Size
<!-- small -->
<button class="py-2 px-3 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-xs tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">Small</button>
<!-- normal -->
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">Medium</button>
<!-- large -->
<button class="py-4 px-8 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-base tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">Large</button>
Button Group
<!-- button group -->
<div class="button-group shadow-outset-fixed rounded-lg inline-flex">
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">One</button>
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">Two</button>
<button class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">Three</button>
</div>
Button Icon
<!-- rounded -->
<button class="relative inline-flex items-center justify-center gap-x-2 text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset border rounded-full text-primary-700 dark:text-primary-200 w-12 h-12">
<i class="bi bi-layers"></i>
</button>
<!-- square -->
<button class="relative inline-flex items-center justify-center gap-x-2 text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset rounded text-primary-700 dark:text-primary-200 w-12 h-12 rounded">
<i class="bi bi-layers"></i>
</button>