Button

<button>

Triggers an action or event. Supports multiple semantic variants and three sizes.

Overview

Preview

Variants

Primary

Preview

<button class="inline-flex items-center justify-center gap-2 rounded-md bg-[#D40C37] px-4 py-2 text-sm font-medium text-white transition-all duration-150 hover:bg-[#b50a2f] active:scale-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#D40C37]/50 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950">
  Primary
</button>

Secondary

Preview

<button class="inline-flex items-center justify-center gap-2 rounded-md bg-zinc-800 px-4 py-2 text-sm font-medium text-zinc-100 transition-all duration-150 hover:bg-zinc-700 active:scale-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950">
  Secondary
</button>

Outline

Preview

<button class="inline-flex items-center justify-center gap-2 rounded-md border border-zinc-700 bg-transparent px-4 py-2 text-sm font-medium text-zinc-100 transition-all duration-150 hover:bg-zinc-800 hover:border-zinc-600 active:scale-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950">
  Outline
</button>

Ghost

Preview

<button class="inline-flex items-center justify-center gap-2 rounded-md bg-transparent px-4 py-2 text-sm font-medium text-zinc-300 transition-all duration-150 hover:bg-zinc-800 hover:text-zinc-100 active:scale-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950">
  Ghost
</button>

Destructive

Preview

<button class="inline-flex items-center justify-center gap-2 rounded-md bg-red-950/60 px-4 py-2 text-sm font-medium text-red-400 ring-1 ring-inset ring-red-800/60 transition-all duration-150 hover:bg-red-900/60 active:scale-95 focus:outline-none">
  Delete
</button>

Disabled

Preview

<button disabled class="inline-flex items-center justify-center gap-2 rounded-md bg-[#D40C37] px-4 py-2 text-sm font-medium text-white opacity-35 pointer-events-none">
  Disabled
</button>

Sizes

Preview

<!-- Small -->
<button class="inline-flex items-center justify-center rounded px-3 py-1.5 text-xs font-medium text-white bg-[#D40C37] ...">Small</button>

<!-- Medium (default) -->
<button class="inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-white bg-[#D40C37] ...">Medium</button>

<!-- Large -->
<button class="inline-flex items-center justify-center rounded-lg px-6 py-3 text-base font-medium text-white bg-[#D40C37] ...">Large</button>

With icon

Preview

<button class="inline-flex items-center justify-center gap-2 rounded-md bg-[#D40C37] px-4 py-2 text-sm font-medium text-white transition-all hover:bg-[#b50a2f] active:scale-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#D40C37]/50">
  <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
  </svg>
  Continue
</button>

Icon only

Preview

<button aria-label="Delete item" class="inline-flex h-9 w-9 items-center justify-center rounded-md text-zinc-400 transition-colors hover:bg-zinc-800 hover:text-zinc-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-500">
  <svg class="h-4 w-4" ...></svg>
</button>

Accessibility notes

• Always use a native <button> element — not <div> or <a>
• Icon-only buttons must include an aria-label
• Use type="submit" for form submissions, type="button" for all others
• The disabled attribute removes the button from tab order automatically