Button Components with Tailwind

A button system needs: base style, variants (primary, secondary, ghost), size variants, and state styles. In Tailwind these are just class strings — compose them in your component logic.

Primary and secondary variants

<!-- Primary -->
<button class="inline-flex items-center justify-center px-4 py-2 rounded-md
  font-medium text-sm bg-blue-600 text-white hover:bg-blue-700
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
  Save changes
</button>

<!-- Secondary -->
<button class="inline-flex items-center px-4 py-2 rounded-md font-medium text-sm
  bg-white text-gray-700 border border-gray-300 hover:bg-gray-50
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Cancel
</button>

<!-- Ghost -->
<button class="inline-flex items-center px-4 py-2 rounded-md font-medium text-sm
  text-gray-700 hover:bg-gray-100 transition-colors">
  Learn more
</button>

Size variants

<button class="px-3 py-1.5 text-xs rounded">Small</button>
<button class="px-4 py-2 text-sm rounded-md">Medium</button>
<button class="px-6 py-3 text-base rounded-lg">Large</button>

The focus:ring-2 focus:ring-offset-2 pattern is non-negotiable for keyboard accessibility. Never skip focus styles to match a design mockup.