Button

The browser's default button, respecified in Tailwind's nearest palette colors. States: default, loading, disabled, toggle. Hover, press, and the OS focus ring are live on every preview.

Default

<button type="button" class="inline-flex min-h-8 @max-sm/preview:min-h-11 cursor-default select-none items-center justify-center gap-1.5 rounded-sm shadow-2xs shadow-zinc-300 dark:shadow-white/10 border border-zinc-500 dark:border-zinc-400 bg-zinc-100 dark:bg-zinc-800 px-2 @max-sm/preview:px-3 text-base @max-sm/preview:text-lg leading-none text-black dark:text-white transition duration-100 enabled:hover:brightness-95 enabled:active:scale-98 enabled:active:brightness-90 enabled:active:shadow-none disabled:opacity-50 disabled:cursor-not-allowed motion-reduce:transition-none enabled:motion-reduce:active:scale-100">
  Button
</button>

Δ from Defaultcursor-default → cursor-progress+ aria-busy="true"+ disabled look, progress cursor kept

<button type="button" aria-busy="true" class="inline-flex min-h-8 @max-sm/preview:min-h-11 cursor-progress aria-busy:opacity-50 aria-busy:hover:brightness-100 aria-busy:active:scale-100 aria-busy:active:brightness-100 aria-busy:active:shadow-2xs select-none items-center justify-center gap-1.5 rounded-sm shadow-2xs shadow-zinc-300 dark:shadow-white/10 border border-zinc-500 dark:border-zinc-400 bg-zinc-100 dark:bg-zinc-800 px-2 @max-sm/preview:px-3 text-base @max-sm/preview:text-lg leading-none text-black dark:text-white transition duration-100 enabled:hover:brightness-95 enabled:active:scale-98 enabled:active:brightness-90 enabled:active:shadow-none disabled:opacity-50 disabled:cursor-not-allowed motion-reduce:transition-none enabled:motion-reduce:active:scale-100">
  Loading
</button>

Disabled

Δ from Default+ disabled attribute, not-allowed cursor

<button type="button" disabled class="inline-flex min-h-8 @max-sm/preview:min-h-11 cursor-default select-none items-center justify-center gap-1.5 rounded-sm shadow-2xs shadow-zinc-300 dark:shadow-white/10 border border-zinc-500 dark:border-zinc-400 bg-zinc-100 dark:bg-zinc-800 px-2 @max-sm/preview:px-3 text-base @max-sm/preview:text-lg leading-none text-black dark:text-white transition duration-100 enabled:hover:brightness-95 enabled:active:scale-98 enabled:active:brightness-90 enabled:active:shadow-none disabled:opacity-50 disabled:cursor-not-allowed motion-reduce:transition-none enabled:motion-reduce:active:scale-100">
  Button
</button>

Toggle

Δ from Default+ aria-pressed="false" → "true" on click+ shadow gone, face sinks while latched+ blue accent text, pressed-tinted borderlatched = :active minus the scale

<button
  type="button"
  x-data="{ pressed: false }"
  :aria-pressed="pressed"
  @click="pressed = !pressed"
  aria-pressed="false"
  class="inline-flex min-h-8 @max-sm/preview:min-h-11 cursor-default select-none items-center justify-center gap-1.5 rounded-sm shadow-2xs shadow-zinc-300 dark:shadow-white/10 border border-zinc-500 dark:border-zinc-400 bg-zinc-100 dark:bg-zinc-800 px-2 @max-sm/preview:px-3 text-base @max-sm/preview:text-lg leading-none text-black dark:text-white transition duration-100 enabled:hover:brightness-95 enabled:active:scale-98 enabled:active:brightness-90 enabled:active:shadow-none disabled:opacity-50 disabled:cursor-not-allowed aria-pressed:text-blue-500 aria-pressed:border-zinc-600 dark:aria-pressed:border-zinc-500 aria-pressed:shadow-none aria-pressed:brightness-90 aria-pressed:inset-shadow-sm aria-pressed:inset-shadow-black/30 motion-reduce:transition-none enabled:motion-reduce:active:scale-100"
>
  Toggle
</button>