Skip to content
Early Access

Button

Buttons are used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

Basic Badge

PreviewCode
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md">
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-blue-700/75 focus:ring-blue-600 bg-blue-600 text-white hover:bg-blue-700 hover:border-blue-700 px-3 py-1.5 text-sm font-medium rounded-md">
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-red-700/75 focus:ring-red-600 bg-red-600 text-white hover:bg-red-700 hover:border-red-700 px-3 py-1.5 text-sm font-medium rounded-md">
  <span>Button</span>
</button>

Sizes

PreviewCode
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-2 py-1 text-xs font-medium rounded-md">
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md">
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-4 py-2 text-sm font-medium rounded-md">
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-4 py-2 text-base font-medium rounded-md">
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-6 py-3 text-lg font-semibold rounded-md">
  <span>Button</span>
</button>

With Icons

PreviewCode
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md">
  <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5">
    <path d="m4.222 12.778 4.617 5.276a1 1 0 0 0 1.563-.073L19.779 5">
    </path>
  </svg>
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-blue-700/75 focus:ring-blue-600 bg-blue-600 text-white hover:bg-blue-700 hover:border-blue-700 px-3 py-1.5 text-sm font-medium rounded-md">
  <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5">
    <path d="m4.222 12.778 4.617 5.276a1 1 0 0 0 1.563-.073L19.779 5">
    </path>
  </svg>
  <span>Button</span>
</button>

Disabled Buttons

PreviewCode
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-blue-700/75 focus:ring-blue-600 bg-blue-600 text-white hover:bg-blue-700 hover:border-blue-700 px-2 py-1 text-xs font-medium rounded-md" disabled="">
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-blue-700/75 focus:ring-blue-600 bg-blue-600 text-white hover:bg-blue-700 hover:border-blue-700 px-3 py-1.5 text-sm font-medium rounded-md" disabled="">
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-blue-700/75 focus:ring-blue-600 bg-blue-600 text-white hover:bg-blue-700 hover:border-blue-700 px-4 py-2 text-sm font-medium rounded-md" disabled="">
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-blue-700/75 focus:ring-blue-600 bg-blue-600 text-white hover:bg-blue-700 hover:border-blue-700 px-4 py-2 text-base font-medium rounded-md" disabled="">
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-blue-700/75 focus:ring-blue-600 bg-blue-600 text-white hover:bg-blue-700 hover:border-blue-700 px-6 py-3 text-lg font-semibold rounded-md" disabled="">
  <span>Button</span>
</button>

Pill Buttons

PreviewCode
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-2 py-1 text-xs font-medium rounded-full">
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-full">
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-4 py-2 text-sm font-medium rounded-full">
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-4 py-2 text-base font-medium rounded-full">
  <span>Button</span>
</button>
<button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-6 py-3 text-lg font-semibold rounded-full">
  <span>Button</span>
</button>