Button
Minimal button with subtle hover states and clean typography.
ActionsTailwind CSS
Overview
Buttons allow users to trigger actions with a single tap. They are the primary way for users to interact with your application.
When to use
- To trigger an action or event
- To submit a form
- To navigate to another page
- To confirm or cancel an action
Preview
Usage
html
<!-- Tailwind CSS pattern - copy the HTML/classes below -->Class Variations
Swap these Tailwind classes to change the pattern's appearance:
Variants
| Variation | Tailwind Classes |
|---|---|
| Primary | bg-primary text-primary-foreground hover:bg-primary-hover |
| Secondary | bg-surface-hover text-default |
| Outline | bg-surface-raised text-default border border-default hover:bg-surface-hover hover:border-emphasis |
| Ghost | text-muted hover:bg-surface-hover hover:text-default |
| Danger | bg-error-emphasis text-white hover:opacity-90 |
Sizes
| Variation | Tailwind Classes |
|---|---|
| Small | h-8 px-3 rounded-md text-xs |
| Medium | h-10 px-4 rounded-lg text-smDefault size |
| Large | h-12 px-6 rounded-lg text-base |
States
| Variation | Tailwind Classes |
|---|---|
| Disabled | opacity-70 cursor-not-allowedAdd disabled attribute to button |
| Loading | opacity-70 cursor-not-allowedAdd spinner SVG and disabled attribute |
Guidelines
Do
- • Use clear, action-oriented labels
- • Use primary variant for the main action on a page
- • Keep button text concise (1-3 words)
- • Use consistent button styling throughout your app
Don't
- • Don't use more than one primary button in a single view
- • Don't use vague labels like 'Click here'
- • Don't disable buttons without explaining why
- • Don't use buttons for navigation when a link would suffice
Accessibility
- • Use semantic <button> element for actions
- • Provide aria-label for icon-only buttons
- • Ensure sufficient color contrast
- • Make sure buttons are keyboard accessible