Buttons are fundamental interactive elements that trigger actions when clicked.
Overview
The Button component comes in multiple variants and sizes to fit different use cases in your design.
Variants
Primary Button
Use for the main call-to-action on a page.
Background: Primary color (#0c8ce9)
Text: White
Hover: Slightly darker blue
Secondary Button
Use for secondary actions or alongside a primary button.
Background: White with 16% opacity
Text: White
Hover: Increased opacity
Ghost Button
Use for tertiary actions or in toolbars.
Background: Transparent
Text: White
Hover: Subtle background
Sizes
- Small - 32px height, 12px padding
- Medium - 40px height, 16px padding (default)
- Large - 48px height, 24px padding
States
All buttons support these states:
- Default - Normal state
- Hover - When mouse hovers over
- Active - When being clicked
- Disabled - When action is unavailable
- Loading - When processing an action
Usage Guidelines
Do's ✅
- Use clear, action-oriented labels like "Save", "Delete", "Continue"
- Place primary buttons on the right in dialog boxes
- Maintain consistent sizing throughout your interface
- Use loading states for async actions
Don'ts ❌
- Don't use more than one primary button per section
- Don't make buttons too small (minimum 32px height)
- Don't use vague labels like "Click here" or "Submit"
- Don't disable buttons without explanation
Accessibility
- All buttons have proper focus states
- Minimum touch target size of 44x44px on mobile
- Color contrast meets WCAG AA standards
- Support keyboard navigation (Enter/Space to activate)
Code Example
When using the Figma plugin to export:
<Button variant="primary" size="medium">
Save Changes
</Button>
Related Components
Need Help?
If you have questions about the Button component:
- Join our Community Discord
- Check the Help Center
- Email support@shadcnfigma.io