Buttons
Button components with clear visual hierarchy, proper touch targets (minimum 44x44px), and WCAG compliant colour combinations.
Button Variants
Primary Button - Yellow
Use for primary actions, most important CTAs, and conversion-focused buttons.
Secondary Button - Black
Use for secondary actions, alternative paths, and supporting CTAs.
Outline Button
Use for tertiary actions, cancel buttons, and less prominent options.
Ghost Button
Use for navigation, minimal interfaces, and subtle actions.
Colored Button Variants
Use colored buttons for specific contexts and status-based actions.
Success Button - Green
Use for confirmations, success actions, and positive CTAs like "Approve", "Confirm", "Save".
Info Button - Blue
Use for informational actions, links to documentation, and neutral CTAs like "Learn More", "View Details".
Danger Button - Red
Use for destructive actions and critical operations like "Delete", "Remove", "Cancel Subscription".
Button Sizes
- Name
Small- Description
12px vertical padding - Use for compact interfaces
- Name
Medium- Description
16px vertical padding - Standard button size
- Name
Large- Description
24px vertical padding - Primary CTAs and hero sections
- Name
Extra Large- Description
32px vertical padding - Landing pages and marketing
Button States
Normal State
Hover State
Disabled State
Loading State
Accessibility Guidelines
- Name
Minimum Size- Description
44x44px touch target (WCAG 2.1 Level AAA)
- Name
Focus Indicator- Description
2px ring with 2px offset, visible in all states
- Name
Contrast Ratio- Description
4.5:1 minimum for text (all buttons meet this)
- Name
Keyboard Accessible- Description
Tab to focus, Enter/Space to activate