Button
Button component for triggering actions and form submissions. Supports loading states, multiple variants (default, destructive, outline, secondary, ghost, link), and flexible sizing.
Live Preview
Variants
Button Variants
Available button variants for different contexts and visual hierarchy
Sizes
Button Sizes
Available size variants from small to large, plus icon-only buttons
States
Loading State
Button with loading spinner
Loading with Custom Text
Display custom loading message
Disabled State
Non-interactive disabled button
With Icons
Icon Before Text
Button with leading icon
Icon After Text
Button with trailing icon
Small Button with Icon
Compact button with icon
Usage Guidance
✓ When to Use
Use for all clickable actions: form submissions, triggering modals, navigation actions, data operations. The primary interactive element for user actions.
✗ When NOT to Use
Don't use for navigation between pages (use Link or anchor tags instead). Avoid for non-interactive elements (use div or span).
Props
asChildloadingloadingTextclassNamestylechildrenonClickonChange