Button
v1.0.7Updated 27 Aug 2026Primary interactive element. Several size and variant styles, supports asChild for composition with Link components. Adds loading / success / error feedback states, an inline confirm flow, badge + tooltip slots, and an o
Preview
Live · 21 stories▸Why this is recommendedactionctaclickcontrol+4
The default, out-of-the-box Button.
- ✓All click actions
- ✓Form submission
- ✓Toolbar actions
- ✓Submit buttons with async work
- ✓Destructive actions needing confirm
- Tone (neutral / primary / success / warning / danger / info) × emphasis (solid / soft / outline / ghost / link)
- Sizes: sm/default/lg/icon
- asChild prop
- States: idle / loading / success / error with auto reset
- Inline confirm flow ("Are you sure?" inline reveal)
- Badge slot (count / dot)
- Tooltip slot
- Ripple on press (toggleable)
- Async submit helper: awaits onClick, flips state
- ✕Navigation links inside body text (use a styled <a>)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
toneSemantic tone (what it means)
—emphasisVisual emphasis (how loud)
—sizeSize preset
—iconOnlySquare icon-only button
—asChildRender as the single child element
—stateControlled feedback state
—confirmInline confirm prompt
—badgeBadge slot
—tooltipTooltip content
—rippleEnable ripple effect
—Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.