Buttons

Primary Buttons

Use primary buttons for the main action in a section or form. Limit to one primary button per view.

HTML

<button class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
    Primary
</button>

<!-- With Icon -->
<button class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors flex items-center">
    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
    </svg>
    With Icon
</button>

<!-- Disabled -->
<button disabled class="px-4 py-2 bg-gray-300 text-gray-500 font-medium rounded-md cursor-not-allowed">
    Disabled
</button>

Secondary Buttons

Use secondary buttons for less prominent actions. They can be paired with primary buttons.

HTML

<button class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
    Secondary
</button>

Danger Buttons

Use danger buttons for destructive actions like delete or remove. Always confirm destructive actions.

HTML

<button class="px-4 py-2 bg-red-600 text-white font-medium rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
    Delete
</button>

<button class="px-4 py-2 border border-red-300 dark:border-red-600 text-red-700 dark:text-red-400 font-medium rounded-md hover:bg-red-50 dark:hover:bg-red-900/20 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
    Remove
</button>

Button Sizes

Different button sizes for various contexts. Use consistently within the same interface.

HTML

<!-- Small -->
<button class="px-2 py-1 text-sm bg-blue-600 text-white font-medium rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
    Small
</button>

<!-- Medium (Default) -->
<button class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
    Medium
</button>

<!-- Large -->
<button class="px-6 py-3 text-lg bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
    Large
</button>

Icon Buttons

Icon-only buttons for compact interfaces. Always include proper aria-labels for accessibility.

HTML

<button aria-label="Settings" class="p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <!-- SVG path -->
    </svg>
</button>

Loading States

Show loading states during async operations to provide user feedback.

HTML

<button disabled class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md cursor-not-allowed opacity-75 flex items-center">
    <svg class="animate-spin -ml-1 mr-3 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    Loading...
</button>

Full Width Buttons

Full width buttons work well in narrow containers or mobile interfaces.

HTML

<button class="w-full px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
    Full Width Primary
</button>

Button Groups

Related buttons can be grouped together with connected borders.

Horizontal Group

Vertical Group

HTML

<div class="inline-flex rounded-md shadow-sm" role="group">
    <button class="px-4 py-2 text-sm font-medium text-blue-600 bg-white border border-gray-200 rounded-l-lg hover:bg-blue-50 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:text-blue-600">
        Left
    </button>
    <button class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:text-blue-600">
        Middle
    </button>
    <button class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-r-md hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-blue-500 focus:text-blue-600">
        Right
    </button>
</div>

Accessibility Guidelines

✓ Do

Use descriptive button text that explains the action
Include aria-label for icon-only buttons
Provide sufficient color contrast (4.5:1 ratio minimum)
Ensure buttons are at least 44x44 pixels for touch targets
Use proper button semantics (<button> element)
Include focus indicators for keyboard navigation
Use loading states for async operations

✗ Don't

Use vague labels like "Click here" or "Submit"
Create buttons smaller than 44x44 pixels
Remove focus indicators without providing alternatives
Use disabled buttons without explaining why
Make destructive actions too easy to trigger accidentally
Use div or span elements as buttons without proper ARIA

Usage Guidelines

When to Use

Primary: Main action in a section (save, submit, next)
Secondary: Secondary actions (cancel, previous, edit)
Danger: Destructive actions (delete, remove, clear)
Icon: Space-constrained interfaces, toolbars
Loading: During async operations to show progress

Button Hierarchy

Use only one primary button per section
Place primary buttons on the right in button groups
Use secondary buttons for alternative actions
Group related actions together
Maintain consistent sizing within the same context

Dark Mode Support

All button components automatically adapt to dark mode using CSS custom properties and Tailwind's dark mode classes.

Primary Buttons

Secondary Buttons

Danger Buttons

Button Sizes

Icon Buttons

Loading States

Full Width Buttons

Button Groups

Horizontal Group

Vertical Group

Accessibility Guidelines

✓ Do

✗ Don't

Usage Guidelines

When to Use

Button Hierarchy

Dark Mode Support

Light Mode

Dark Mode

Related Components

Form Inputs

Modals

Dropdowns