Button Component Documentation

A comprehensive button system built with Tailwind CSS utility classes, providing multiple variants, states, and styling options.

Base Button Class

All buttons start with the .btn class which provides:

• Inline-flex layout with centered content
• Medium font weight
• 2px border radius
• Smooth transitions (200ms ease-in-out)
• Focus outline removal
• Disabled state handling (50% opacity, not-allowed cursor)
• Text selection prevention
• No text wrapping
• Transparent border by default
• 14px font size
• Padding: 3.5px vertical, 12px horizontal (px-3)

<button class="btn btn-primary">Button</button>

Primary Variants

Solid background buttons with white text (except warning variant).

Available Colors

Class	Background	Text Color	Use Case
.btn-primary	Blue (bg-primary)	White	Primary actions
.btn-secondary	Gray 600	White	Secondary actions
.btn-success	Green 600	White	Success/confirmation
.btn-warning	Yellow 500	Yellow 900	Warning actions
.btn-danger	Red 600	White	Destructive actions
.btn-info	Cyan 600	White	Informational actions
.btn-dark	Gray 900	White	Dark theme actions
.btn-purple	#9C27B0	White	Purple accent actions

Example Usage

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-purple">Purple</button>

Outline Variants

Transparent background with colored border and text. Fills with color on hover.

Available Colors

Class	Border/Text	Hover State
.btn-outline-primary	Primary blue	Filled blue with white text
.btn-outline-secondary	Gray 600	Filled gray with white text
.btn-outline-success	Green 600	Filled green with white text
.btn-outline-warning	Yellow 500/600	Filled yellow with dark text
.btn-outline-danger	Red 600	Filled red with white text
.btn-outline-info	Cyan 600	Filled cyan with white text
.btn-outline-dark	Gray 900	Filled dark with white text
.btn-outline-purple	#9C27B0	Filled purple with white text

Example Usage

<button class="btn btn-outline-primary">Primary Outline</button>
<button class="btn btn-outline-secondary">Secondary Outline</button>
<button class="btn btn-outline-success">Success Outline</button>
<button class="btn btn-outline-warning">Warning Outline</button>
<button class="btn btn-outline-danger">Danger Outline</button>
<button class="btn btn-outline-info">Info Outline</button>
<button class="btn btn-outline-dark">Dark Outline</button>
<button class="btn btn-outline-purple">Purple Outline</button>

Ghost/Text Variants

Minimal styling with no border. Shows subtle background on hover.

Available Colors

Class	Text Color	Hover Background
.btn-ghost-primary	Primary blue	Primary 10% opacity
.btn-ghost-secondary	Gray 600	Gray 10% opacity
.btn-ghost-success	Green 600	Green 10% opacity
.btn-ghost-warning	Yellow 600	Yellow 10% opacity
.btn-ghost-danger	Red 600	Red 10% opacity
.btn-ghost-info	Cyan 600	Cyan 10% opacity
.btn-ghost-purple	#9C27B0	Purple 10% opacity

Example Usage

<button class="btn btn-ghost-primary">Ghost Primary</button>
<button class="btn btn-ghost-secondary">Ghost Secondary</button>
<button class="btn btn-ghost-success">Ghost Success</button>
<button class="btn btn-ghost-warning">Ghost Warning</button>
<button class="btn btn-ghost-danger">Ghost Danger</button>
<button class="btn btn-ghost-info">Ghost Info</button>
<button class="btn btn-ghost-purple">Ghost Purple</button>

Loading State

Add .btn-loading to any button variant to show a loading spinner.

Features

• Makes text transparent
• Disables pointer events
• Shows animated spinner in appropriate color
• Spinner color matches button variant automatically

Example Usage

<button class="btn btn-primary btn-loading">Loading...</button>
<button class="btn btn-outline-success btn-loading">Processing...</button>
<button class="btn btn-ghost-danger btn-loading">Deleting...</button>

Spinner Colors by Variant

• Primary variants: White spinner
• Warning variant: Yellow 900 spinner (dark)
• Outline variants: Colored spinner matching border color
• Ghost variants: Colored spinner matching text color

Disabled State

Add the disabled attribute to disable any button.

Features

• 50% opacity
• Not-allowed cursor
• Prevents interaction

Example Usage

<button class="btn btn-primary" disabled>Disabled Primary</button>
<button class="btn btn-outline-secondary" disabled>Disabled Outline</button>
<button class="btn btn-ghost-success" disabled>Disabled Ghost</button>

Button Groups

Group multiple buttons together with shared borders.

Features

• Buttons share borders (removes left border from middle/last buttons)
• First button keeps left radius, last keeps right radius
• Middle buttons have no border radius
• Focus state elevates button above siblings (z-index)

Example Usage

<div class="btn-group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>

<div class="btn-group">
  <button class="btn btn-outline-secondary">Option 1</button>
  <button class="btn btn-outline-secondary">Option 2</button>
  <button class="btn btn-outline-secondary">Option 3</button>
</div>

Interactive States

All buttons include hover, active, and focus states:

Hover States

• Primary variants: 90% opacity background
• Outline variants: Fill with solid color
• Ghost variants: 10% opacity background

Active States

• Primary variants: 95% opacity background
• Outline variants: Darker fill color
• Ghost variants: 15% opacity background

Focus States

• Removes default outline
• Maintains accessibility through other visual cues

Combining Classes

You can combine button variants with other utility classes:

<!-- Full width button -->
<button class="btn btn-primary w-full">Full Width</button>

<!-- Button with icon -->
<button class="btn btn-success flex items-center gap-2">
  <svg>...</svg>
  Save Changes
</button>

<!-- Small button -->
<button class="btn btn-danger text-xs px-2 py-1">Delete</button>

<!-- Large button -->
<button class="btn btn-info text-lg px-6 py-3">Get Started</button>

Best Practices

1. Use semantic variants: Choose button colors based on action type (danger for delete, success for confirm, etc.)

2. Combine with loading state: Always show loading state during async operations

3. Disable during processing: Combine disabled and loading states for async actions

4. Keep text concise: Button text should be short and action-oriented

5. Use button groups sparingly: Best for related actions like view switchers or pagination

6. Consider accessibility: Ensure sufficient color contrast and provide clear focus indicators

Customization

The button system uses Tailwind's @apply directive. To customize:

1. Modify the color values in the CSS file
2. Adjust padding, font size, or border radius in the base .btn class
3. Add new color variants following the existing pattern
4. Customize transition timing in the base class

Browser Support

Works in all modern browsers that support:

• CSS custom properties
• Flexbox
• CSS transitions
• CSS animations (for loading spinner)