Skip to main content

Primary Buttons

Primary action buttons with variants, states, and accessibility features

4
Button Types
3
Sizes
6
States
100%
Accessible

Button Variants

Primary Button

Main call-to-action buttons for primary user actions

<button class="bg-botnar-pink-500 hover:bg-botnar-pink-600 dark:bg-botnar-pink-600 dark:hover:bg-botnar-pink-700 text-white px-6 py-3 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-botnar-pink-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
  Save Changes
</button>

Secondary Button

Secondary actions and alternative options

<button class="bg-transparent hover:bg-botnar-blue-50 dark:hover:bg-botnar-blue-900/20 text-botnar-blue-600 dark:text-botnar-blue-400 border border-botnar-blue-600 dark:border-botnar-blue-400 px-6 py-3 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-botnar-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
  Cancel
</button>

Ghost Button

Minimal buttons for tertiary actions and navigation

<button class="bg-transparent hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 px-6 py-3 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
  Learn More
</button>

Danger Button

Destructive actions that require user confirmation

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

Button Sizes

Small (32px height)

Compact buttons for secondary actions and space-constrained interfaces

Medium (40px height)

Standard button size for most interface actions

Large (48px height)

Prominent buttons for primary actions and mobile interfaces

Button States

Interactive States

Special States

Interactive Demo

Button State Manager

Click buttons to see different states and interactions

Current States:

Loading:
Success Shown:
Click Count:

Accessibility Features

WCAG Compliance

  • ✓ Minimum 44px touch target size
  • ✓ WCAG AA contrast ratios (4.5:1)
  • ✓ Focus ring indicators
  • ✓ Keyboard navigation support
  • ✓ Screen reader compatible

Interactive Features

  • • Smooth hover transitions
  • • Loading state animations
  • • Icon integration support
  • • Disabled state handling
  • • Dark mode variants