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