Button
Interactive elements showcasing MW brand colors, spacing tokens, and accessibility features.
MW Brand Color Variants
Primary action buttons using Energy Blue, Breakthrough Orange, and Flow Teal brand colors
Preview
Code
Semantic Color System
Action buttons using semantic colors with proper contrast ratios for accessibility
Preview
Code
Spacing & Size Tokens
Button sizes using 4pt grid spacing system for consistent vertical rhythm
Preview
Code
Focus Ring & Accessibility
WCAG-compliant focus indicators with MW color system and keyboard navigation
Preview
Accessibility: All buttons include 2px focus rings with 2px offset for WCAG AA compliance. Tab through buttons to see focus indicators.
Code
Button Sizes
Different button sizes for various contexts
Preview
Code
Button States
Interactive states and disabled buttons