Buttons and Variants

Base styles plus variant styles

A button combines base utilities (padding, radius, font, focus ring, transitions, disabled styles) with variant utilities (primary, secondary, danger) and sizes. Define them once in a component so every button looks and behaves the same. Include focus-visible: outlines, disabled:opacity-50 disabled:cursor-not-allowed, and enough padding for touch targets (about 44px tall on mobile).

Reusable UI from utilities

Buttons, cards and forms show how to combine utilities into consistent, reusable pieces.

Primary and secondary buttons

Shared base classes with variants.

<button class="inline-flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-semibold text-white
               transition-colors hover:bg-cyan-700 focus-visible:outline-2 focus-visible:outline-offset-2
               focus-visible:outline-cyan-600 disabled:cursor-not-allowed disabled:opacity-50">
  Save changes
</button>

<button class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm
               font-semibold text-gray-900 hover:bg-gray-50 focus-visible:outline-2 focus-visible:outline-cyan-600">
  Cancel
</button>

Use real buttons and links

Use for actions and for navigation; styling a div as a button loses keyboard and screen reader support.