Button
Clickable control that triggers actions.
<!-- Default -->
<button type="button"
class="whitespace-nowrap py-8px px-16px text-btn2 rounded-8px text-white border disabled:bg-black-200 disabled:border-black-200 bg-black border-black hover:bg-black-700 hover:border-black-700 active:bg-black-500 active:border-black-500">
Get started
</button>
<button type="button"
class="whitespace-nowrap py-8px px-16px text-btn2 rounded-8px text-white border disabled:bg-black-200 disabled:border-black-200 bg-black border-black hover:bg-black-700 hover:border-black-700 active:bg-black-500 active:border-black-500"
disabled>
Get started
</button>
<!-- Small -->
<button type="button"
class="whitespace-nowrap py-4px px-16px text-btn3 rounded-8px text-white border disabled:bg-black-200 disabled:border-black-200 bg-black border-black hover:bg-black-700 hover:border-black-700 active:bg-black-500 active:border-black-500">
Get started
</button>
<button type="button"
class="whitespace-nowrap py-4px px-16px text-btn3 rounded-8px text-white border disabled:bg-black-200 disabled:border-black-200 bg-black border-black hover:bg-black-700 hover:border-black-700 active:bg-black-500 active:border-black-500"
disabled>
Get started
</button>
Secondary
<!-- Default -->
<button type="button"
class="whitespace-nowrap py-8px px-16px text-btn2 rounded-8px text-black border disabled:bg-black-200 disabled:border-black-200 disabled:text-white bg-black-100 border-black-100 hover:bg-black-200 hover:border-black-200 active:bg-black-300 active:border-black-300">
Get started
</button>
<button type="button"
class="whitespace-nowrap py-8px px-16px text-btn2 rounded-8px text-black border disabled:bg-black-200 disabled:border-black-200 disabled:text-white bg-black-100 border-black-100 hover:bg-black-200 hover:border-black-200 active:bg-black-300 active:border-black-300"
disabled>
Get started
</button>
<!-- Small -->
<button type="button"
class="whitespace-nowrap py-4px px-16px text-btn3 rounded-8px text-black border disabled:bg-black-200 disabled:border-black-200 disabled:text-white bg-black-100 border-black-100 hover:bg-black-200 hover:border-black-200 active:bg-black-300 active:border-black-300">
Get started
</button>
<button type="button"
class="whitespace-nowrap py-4px px-16px text-btn3 rounded-8px text-black border disabled:bg-black-200 disabled:border-black-200 disabled:text-white bg-black-100 border-black-100 hover:bg-black-200 hover:border-black-200 active:bg-black-300 active:border-black-300"
disabled>
Get started
</button>
Outline
<!-- Default -->
<button type="button"
class="whitespace-nowrap py-8px px-16px text-btn2 rounded-8px text-foreground border disabled:bg-background disabled:border-black-200 disabled:text-black-200 dark:disabled:border-black-700 dark:disabled:text-black-700 bg-background border-black-300 hover:border-foreground active:bg-black-100 active:border-foreground dark:active:bg-black-800">
Get started
</button>
<button type="button"
class="whitespace-nowrap py-8px px-16px text-btn2 rounded-8px text-foreground border disabled:bg-background disabled:border-black-200 disabled:text-black-200 dark:disabled:border-black-700 dark:disabled:text-black-700 bg-background border-black-300 hover:border-foreground active:bg-black-100 active:border-foreground dark:active:bg-black-800"
disabled>
Get started
</button>
<!-- Small -->
<button type="button"
class="whitespace-nowrap py-4px px-16px text-btn3 rounded-8px text-foreground border disabled:bg-background disabled:border-black-200 disabled:text-black-200 dark:disabled:border-black-700 dark:disabled:text-black-700 bg-background border-black-300 hover:border-foreground active:bg-black-100 active:border-foreground dark:active:bg-black-800">
Get started
</button>
<button type="button"
class="whitespace-nowrap py-4px px-16px text-btn3 rounded-8px text-foreground border disabled:bg-background disabled:border-black-200 disabled:text-black-200 dark:disabled:border-black-700 dark:disabled:text-black-700 bg-background border-black-300 hover:border-foreground active:bg-black-100 active:border-foreground dark:active:bg-black-800"
disabled>
Get started
</button>
Ghost
<button type="button"
class="flex whitespace-nowrap items-center justify-center py-4px px-16px rounded-8px text-btn2 gap-8px text-foreground disabled:bg-background disabled:border-background disabled:text-black-200 dark:disabled:text-black-500 bg-background border border-background hover:bg-black-100 hover:border-black-100 active:bg-black-200 active:border-black-200 dark:hover:bg-black-600 dark:hover:border-black-600 dark:active:bg-black-500 dark:active:border-black-500">
Get started
<svg width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_60_3913)">
<path d="M3.33331 8H12.6666"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M8.66669 12L12.6667 8"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M8.66669 4L12.6667 8"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"/>
</g>
</svg>
</button>
<button type="button"
class="flex whitespace-nowrap items-center justify-center py-4px px-16px rounded-8px text-btn2 gap-8px text-foreground disabled:bg-background disabled:border-background disabled:text-black-200 dark:disabled:text-black-500 bg-background border border-background hover:bg-black-100 hover:border-black-100 active:bg-black-200 active:border-black-200 dark:hover:bg-black-600 dark:hover:border-black-600 dark:active:bg-black-500 dark:active:border-black-500"
disabled>
Get started
<svg width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_60_3913)">
<path d="M3.33331 8H12.6666"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M8.66669 12L12.6667 8"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M8.66669 4L12.6667 8"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"/>
</g>
</svg>
</button>
Link
<button type="button"
class="flex whitespace-nowrap items-center justify-center text-btn2 gap-8px text-foreground disabled:text-black-200 disabled:no-underline hover:underline active:underline">
Get started
</button>
<button type="button"
class="flex whitespace-nowrap items-center justify-center text-btn2 gap-8px text-foreground disabled:text-black-200 disabled:no-underline hover:underline active:underline"
disabled>
Get started
</button>
Danger
<!-- Default -->
<button type="button"
class="whitespace-nowrap py-8px px-16px text-btn2 rounded-8px text-white border disabled:bg-red-200 disabled:border-red-200 bg-red-500 border-red-500 hover:border-red-600 hover:bg-red-600 active:bg-red-700 active:border-red-700">
Get started
</button>
<button type="button"
class="whitespace-nowrap py-8px px-16px text-btn2 rounded-8px text-white border disabled:bg-red-200 disabled:border-red-200 bg-red-500 border-red-500 hover:border-red-600 hover:bg-red-600 active:bg-red-700 active:border-red-700"
disabled>
Get started
</button>
<!-- Small -->
<button type="button"
class="whitespace-nowrap py-4px px-16px text-btn3 rounded-8px text-white border disabled:bg-red-200 disabled:border-red-200 bg-red-500 border-red-500 hover:border-red-600 hover:bg-red-600 active:bg-red-700 active:border-red-700">
Get started
</button>
<button type="button"
class="whitespace-nowrap py-4px px-16px text-btn3 rounded-8px text-white border disabled:bg-red-200 disabled:border-red-200 bg-red-500 border-red-500 hover:border-red-600 hover:bg-red-600 active:bg-red-700 active:border-red-700"
disabled>
Get started
</button>