Copy production-ready Tailwind button examples with clear hover, focus-visible, disabled, and contrast conventions. Each snippet keeps complete class names inside HTML so search engines and build tools can understand the code.
Use for the main action on a screen or form.
<button class="rounded-lg bg-cyan-500 px-5 py-3 text-sm font-semibold text-slate-950 shadow-sm transition hover:bg-cyan-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-300">
Save changes
</button>Use beside a primary action when the choice is useful but not dominant.
<button class="rounded-lg border border-white/10 bg-white/5 px-5 py-3 text-sm font-semibold text-white transition hover:border-cyan-500/50 hover:bg-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-300">
Preview
</button>Use for actions that remove data or cannot be easily undone.
<button class="rounded-lg bg-rose-500 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-rose-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-300">
Delete item
</button>Use in dense toolbars, tables, and compact navigation.
<button class="rounded-lg px-4 py-2 text-sm font-medium text-slate-300 transition hover:bg-white/10 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-300">
Details
</button>Keep button text specific, visible, and action-oriented. Avoid using color alone to communicate destructive or disabled states. Every interactive button should have a visible focus state for keyboard users.
Test long labels and translated strings before shipping. Buttons should wrap or maintain stable dimensions without pushing nearby controls into awkward positions on mobile screens.