Buttons

Copy-paste ready button components with all variants

← Back to Home

Button Variants

Different button styles for various actions

HTML 
<!-- Primary Button -->
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Primary
</button>

<!-- Secondary Button -->
<button class="bg-gray-200 text-gray-900 px-4 py-2 rounded-lg hover:bg-gray-300 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
  Secondary
</button>

<!-- Success Button -->
<button class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
  Success
</button>

<!-- Danger Button -->
<button class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
  Danger
</button>

Outline Buttons

Buttons with transparent background and colored border

HTML 
<button class="border-2 border-blue-600 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-600 hover:text-white focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Primary Outline
</button>

<button class="border-2 border-green-600 text-green-600 px-4 py-2 rounded-lg hover:bg-green-600 hover:text-white focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
  Success Outline
</button>

Ghost Buttons

Minimal buttons with hover background

HTML 
<button class="text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Primary Ghost
</button>

Button Sizes

Different button sizes for various use cases

HTML 
<!-- Extra Small -->
<button class="bg-blue-600 text-white px-2 py-1 text-xs rounded hover:bg-blue-700">
  Extra Small
</button>

<!-- Small -->
<button class="bg-blue-600 text-white px-3 py-1.5 text-sm rounded-md hover:bg-blue-700">
  Small
</button>

<!-- Medium -->
<button class="bg-blue-600 text-white px-4 py-2 text-sm rounded-lg hover:bg-blue-700">
  Medium
</button>

<!-- Large -->
<button class="bg-blue-600 text-white px-6 py-3 text-base rounded-lg hover:bg-blue-700">
  Large
</button>

Buttons with Icons

Add icons to make buttons more visual

HTML 
<!-- Icon Left -->
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 inline-flex items-center">
  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
  </svg>
  Add Item
</button>

<!-- Icon Only (Square) -->
<button class="bg-blue-600 text-white p-2 rounded-lg hover:bg-blue-700">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
  </svg>
</button>

Button States

Loading, disabled, and active states

HTML 
<!-- Loading -->
<button disabled class="bg-blue-600 text-white px-4 py-2 rounded-lg opacity-75 cursor-not-allowed inline-flex items-center">
  <svg class="animate-spin h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  Loading...
</button>

<!-- Disabled -->
<button disabled class="bg-gray-300 text-gray-500 px-4 py-2 rounded-lg cursor-not-allowed">
  Disabled
</button>

Full Width Buttons

Buttons that span the full width of their container

HTML 
<button class="w-full bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
  Full Width Primary
</button>

Button Groups

Group related buttons together

Horizontal Group

Segmented Control

Action Group

HTML 
<!-- Button Group -->
<div class="inline-flex rounded-lg border border-gray-300 overflow-hidden">
  <button class="px-4 py-2 text-sm text-gray-700 bg-white hover:bg-gray-50 border-r border-gray-300">
    Left
  </button>
  <button class="px-4 py-2 text-sm text-gray-700 bg-white hover:bg-gray-50 border-r border-gray-300">
    Middle
  </button>
  <button class="px-4 py-2 text-sm text-gray-700 bg-white hover:bg-gray-50">
    Right
  </button>
</div>