Button
Clickable control that triggers actions.
<button
name="button"
type="button"
class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-white dark:text-black-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-black border-black hover:bg-black-700 hover:border-black-700 focus:bg-black-700 focus:border-black-700 active:bg-black-500 active:border-black-500 dark:bg-white dark:border-white dark:hover:bg-black-200 dark:hover:border-black-200 dark:focus:bg-black-200 dark:focus:border-black-200 dark:active:bg-black-400 dark:active:border-black-400"
title="Get started">
Get started
</button>
Secondary
<button
name="button"
type="button"
class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-black-100 border-black-100 hover:bg-black-200 hover:border-black-200 focus:bg-black-200 focus:border-black-200 active:bg-black-300 active:border-black-300 dark:bg-black-700 dark:border-black-700 dark:hover:bg-black-600 dark:hover:border-black-600 dark:focus:bg-black-600 dark:focus:border-black-600 dark:active:bg-black-500 dark:active:border-black-500"
title="Get started">
Get started
</button>
Outline
<button
name="button"
type="button"
class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-black-100 hover:border-black focus:border-black active:bg-black-50 active:border-black dark:border-black-700 dark:hover:border-white dark:focus:border-white dark:active:bg-black-800"
title="Get started">
Get started
</button>
Ghost
<button
name="button"
type="button"
class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-black dark:text-white disabled:opacity-40 border focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-transparent hover:bg-black-100 hover:border-black-100 focus:bg-black-100 focus:border-black-100 active:bg-black-200 active:border-black-200 dark:hover:bg-black-700 dark:hover:border-black-700 dark:active:bg-black-600 dark:active:border-black-600 dark:focus:bg-black-700 dark:focus:border-black-700"
title="Get started">
Get started
</button>
Danger
<button
name="button"
type="button"
class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-white border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-red-600 border-red-600 hover:border-red-700 hover:bg-red-700 focus:border-red-700 focus:bg-red-700 active:bg-red-800 active:border-red-800"
title="Get started">
Get started
</button>
Disabled
<button
name="button"
type="button"
class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-white dark:text-black-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-black border-black hover:bg-black-700 hover:border-black-700 focus:bg-black-700 focus:border-black-700 active:bg-black-500 active:border-black-500 dark:bg-white dark:border-white dark:hover:bg-black-200 dark:hover:border-black-200 dark:focus:bg-black-200 dark:focus:border-black-200 dark:active:bg-black-400 dark:active:border-black-400"
title="Get started"
disabled="disabled">
Get started
</button>
Loading
<button
name="button"
type="button"
class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-white dark:text-black-900 border disabled:opacity-30 bg-black border-black dark:bg-white dark:border-white"
title="Get started">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14.1819 6.34366C13.8985 5.28593 13.3484 4.31862 12.5843 3.53424C11.8202 2.74986 10.8676 2.17466 9.81767 1.86365C8.76773 1.55264 7.65555 1.51623 6.58751 1.75791C5.51948 1.99958 4.53131 2.51125 3.71754 3.24397C2.90377 3.97669 2.29161 4.90596 1.93962 5.94288C1.58763 6.97981 1.50759 8.0897 1.70714 9.1664C1.9067 10.2431 2.37918 11.2506 3.07939 12.0925C3.7796 12.9344 4.68412 13.5826 5.70642 13.975"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round">
</path>
</svg>
Get started
</button>
With animation
To use animation add class .loader-spin to your project.
.loader-spin > svg {
animation: spin 1s linear infinite;
}
Then you can use it on our button element.
<button
name="button"
type="button"
class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-white dark:text-black-900 border disabled:opacity-30 bg-black border-black dark:bg-white dark:border-white loader-spin"
title="Get started">
<svg
width="16"
height="16"
viewbox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14.1819 6.34366C13.8985 5.28593 13.3484 4.31862 12.5843 3.53424C11.8202 2.74986 10.8676 2.17466 9.81767 1.86365C8.76773 1.55264 7.65555 1.51623 6.58751 1.75791C5.51948 1.99958 4.53131 2.51125 3.71754 3.24397C2.90377 3.97669 2.29161 4.90596 1.93962 5.94288C1.58763 6.97981 1.50759 8.0897 1.70714 9.1664C1.9067 10.2431 2.37918 11.2506 3.07939 12.0925C3.7796 12.9344 4.68412 13.5826 5.70642 13.975"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round">
</path>
</svg>
Get started
</button>
Only icon
<button
name="button"
type="button"
class="flex gap-8px items-center justify-center whitespace-nowrap w-[30px] h-[30px] text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-white dark:text-black-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-black border-black hover:bg-black-700 hover:border-black-700 focus:bg-black-700 focus:border-black-700 active:bg-black-500 active:border-black-500 dark:bg-white dark:border-white dark:hover:bg-black-200 dark:hover:border-black-200 dark:focus:bg-black-200 dark:focus:border-black-200 dark:active:bg-black-400 dark:active:border-black-400"
title="Get started">
<svg
width="24"
height="24"
viewbox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 20.9999L16.66 16.6599M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</button>
With icon
<button
name="button"
type="button"
class="flex gap-8px items-center justify-center whitespace-nowrap py-4px px-16px text-btn2 [&>svg]:w-16px [&>svg]:h-16px rounded-8px text-white dark:text-black-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-black border-black hover:bg-black-700 hover:border-black-700 focus:bg-black-700 focus:border-black-700 active:bg-black-500 active:border-black-500 dark:bg-white dark:border-white dark:hover:bg-black-200 dark:hover:border-black-200 dark:focus:bg-black-200 dark:focus:border-black-200 dark:active:bg-black-400 dark:active:border-black-400"
title="Get started">
Get started
<svg
width="24"
height="24"
viewbox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M13.5 4.5L21 12M21 12L13.5 19.5M21 12H3"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round">
</path>
</svg>
</button>