A button that runs the job — progress, verdict, and back again.
A self-reverting action button: click it and it morphs into a live progress state — braille spinner, wave dots, shimmer sweep — while your async onAction runs. Resolve and a check draws itself in; reject and a cross appears; after a customizable resultDuration it returns to its idle form. States crossfade with a subtle blur on one grid cell, so the button never jumps in size. Five progress tones, reduced-motion safe, announces state via aria-live.
Add the package. A self-reverting async action button — click, watch it work, see the verdict, and it's a button again. Ships its own CSS; nothing else to wire up.
pnpm add @roy-ui/uiimport { ProgressButton } from '@roy-ui/ui';
// or just this component:
import { ProgressButton } from '@roy-ui/ui/progress-button';Pass your async work as onAction. On click the button disables itself and morphs into a progress state — braille spinner, wave dots, and a shimmer sweep. When the promise resolves, a check draws itself in with your successLabel; if it rejects, a cross with your errorLabel. After resultDuration (2s by default) the button returns to its idle form, ready to press again. Actions that finish instantly still show progress for a moment, so the state never flashes.
The action resolves after two seconds. Notice the trailing dots in the progress label bob in a wave — write the label with a trailing … and the button animates it for you.
<ProgressButton
onAction={() => deploy()} // any promise
progressLabel="Deploying…"
successLabel="Deployed"
>
Deploy
</ProgressButton>A rejected promise flips the verdict to the error flag instead — no try/catch needed on your side. Progress looks the same as any other run; the color only turns red at the moment of failure, with the same one-shot shake the form fields use.
<ProgressButton
onAction={async () => {
await deploy(); // throws → error flag + shake
}}
progressLabel="Deploying…"
errorLabel="Deploy failed"
>
Deploy
</ProgressButton>resultDuration controls how long the success or error flag lingers before the button reverts to idle. Keep it short (~800ms) for repeated actions like Save, longer for verdicts the user should register.
Both buttons run the same 1.2s action; only the flag time differs.
<ProgressButton onAction={save} resultDuration={800} successLabel="Saved">
Save
</ProgressButton>
<ProgressButton onAction={save} resultDuration={4000} successLabel="Saved">
Save
</ProgressButton>All four states render stacked on a single grid cell, so the button's width never jumps — states crossfade with opacity, a slight rise, and a 2px blur that masks the swap. The transitions are CSS transitions (not keyframes), so rapid state changes retarget smoothly instead of restarting. The button disables itself while busy, scales down 3% on press for tactile feedback, and announces each state change via aria-live='polite' with aria-busy during progress. Under prefers-reduced-motion the shimmer, wave dots, rise, and blur are all removed — states simply fade. Every color is a CSS variable if you want to rebrand it.
// Drive the states yourself — clicks only call onAction.
<ProgressButton status={status} onAction={start}>
Deploy
</ProgressButton>Everything else you pass (className, style, data-*, disabled) is spread onto the native button. onClick is replaced by onAction.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Idle button content, e.g. "Deploy". Required. |
onAction | () => void | Promise<unknown> | — | Async work started on click. Resolve → success flag, reject → error flag. |
progressLabel | string | 'Working…' | Text shown while the action runs. A trailing … becomes animated wave dots. |
successLabel | string | 'Done' | Text shown with the check when the action resolves. |
errorLabel | string | 'Failed' | Text shown with the cross when the action rejects. |
resultDuration | number | 2000 | How long the success/error flag stays before reverting to idle, in ms. |
tone | 'danger' | 'warning' | 'neutral' | 'success' | 'info' | 'info' | Tone of the in-progress state. Success/error states use their own colors. |
rememberOutcome | boolean | true | After reverting to idle, keep a subtle green/red edge from the last outcome. Set false to return to the untouched look. |
status | 'idle' | 'progress' | 'success' | 'error' | — | Controlled status. When set, clicks only call onAction — you drive the states. |