An async button that walks Idle, Pending, Success and Error.
FreeWeb and Mobile2 variantsMotion
Preview
npx shadcn add @fetaui/particle-buttonPlayground
Success
Error
Disabled
Variant
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/particle-button
Success
Resolve onAction to show the tick and throw 12 chips. It returns to idle after 1.6 s.
Motion
Accessibility
- Pending sets aria-busy, and each result is announced.
- The width stays locked while it works.
Motion
- Success throws 12 chips with gravity and spin over 650 ms.
- Error shakes.
- With reduced motion, there are no chips and no shake.
- Swift uses color and a haptic instead of chips.
Responsive behavior
- Height steps up on Mobile through the size tokens.
Performance
- Chips mount only for a successful run and only when not still. There are 12, seeded by index, so no random values run.
- Chips move with transform and opacity, so they never run layout.
- The width locks with a min-width while it works, so the row around it stays put.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import from @/components/fetaui/particle-button.
- Put the work in onAction and return a promise: resolve for Success, reject for Error. It resets after 1.6 s.
- onClick fires on every press, even while pending. Only onAction is guarded against double runs.
- The demo waits 900 ms and fails on purpose. Wire up onAction.
Related
ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.Gradient ButtonComponentAn accent button that keeps its color in Light and Dark. Hover sweeps a sheen.Hold To ConfirmComponentPress and hold: a sweep crosses the button and the action fires when it reaches the far edge. Let go early and it springs back.SpinnerComponentSays something is happening when the wait is short or unknown. Four kinds at five sizes.ToastComponentA short message that melts from a pill into a card. Eight kinds, with stacking and swipe.