Buttons
Interactive buttons with multiple variants, sizes, and states for all user actions.
Button Variants
Different visual styles for various button purposes and hierarchy.
Button Sizes
Standardized button sizes for different contexts and emphasis levels.
Buttons with Icons
Combine text and icons for better visual communication and recognition.
Button States
Different states for buttons including disabled and loading.
Disabled State
Loading State
Full Width Buttons
Buttons that span the full width of their container, useful for forms and mobile layouts.
Button Groups
Related buttons grouped together for cohesive actions.
Horizontal Group
Icon Button Group
Semantic Action Buttons
Buttons using semantic colors from the design system for specific actions.
Accessibility Guidelines
Best practices for accessible button implementation.
Minimum Touch Target Size
All buttons should have a minimum touch target of 44x44px (WCAG 2.2 AAA best practice). Default button size already meets this requirement.
Color Contrast
Button text must have at least 4.5:1 contrast ratio against the button background. All default variants meet WCAG 2.2 AA standards.
Clear Labels
Button text should clearly describe the action. Use specific verbs like "Save", "Delete", "Download" rather than generic "OK" or "Click Here".
Icon-Only Buttons
When using icon-only buttons, always include an aria-label for screen readers: <Button aria-label="Delete item"><Trash /></Button>