A clickable element for triggering actions. Supports 7 variants, an outline modifier, 4 sizes, loading states, and icon composition.
Seven variants: primary (default), secondary , destructive , muted , accent , ghost , and link .
Choose at most one variant boolean; the public types make them mutually exclusive. Primary is the default, not a boolean prop.
Add outline to any solid variant for a bordered, transparent version.
Has no effect on ghost or link .
Four sizes: normal (h-10, default), compact (h-8), small (h-6), micro (h-5).
Icon-only buttons automatically become square. Use micro for dense UI contexts like table rows, card footers, or inline actions.
Use icon for a leading icon and endIcon for trailing.
Providing only icon (no label, endIcon, or children) makes the button square automatically.
loading disables the button and shows a spinner.
Pass a number (0–100) to turn it into a progress bar — the fill adapts to the variant's color automatically.
Click the last button to see the animation.
The disabled prop makes the button inert. Also set automatically when loading is truthy.
pill rounds corners fully. grow stretches to full width. borderless removes the border.
Pass children for complex layouts, or override styles via the class prop (merged with twMerge).