feedback
Async Action Control
A stable action control that owns pending, success, failure and retry without collapsing into a spinner-only button.
- feedback
- async
- action
- success
- failure
Async Button remains a compact preset; this control makes the complete action lifecycle legible.
Live preview
Quick usage
import { AsyncActionControl } from "@pinky-ui/systems";
<AsyncActionControl label="Publish" onAction={publish} />Install
Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add async-action-controlPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- Pointer and keyboard paths expose the same state change.
- Status and focus remain meaningful when motion is disabled.
Performance
- Uses local state and transforms; no per-frame React pointer loop.
Reduced motion
Resolves state changes without layout animation while preserving semantics.
When to use
- Product workflows with a clear reversible or inspectable state.
When not to use
- Decorative motion without a user task.
Skill
Purpose
Give one action control a complete idle, pending, success, failure and retry lifecycle while preserving intent.
Use when
Publish, invite, submit or retry has a meaningful short asynchronous result that belongs to the initiating control.
Avoid
A button that only swaps in a spinner, a disabled control with no recovery path, or a full task that should become a Background Task Row.
Accessibility
Expose aria-busy while pending, keep success and error text available, and never rely on icon or color alone to communicate the result.
Keyboard and touch
Use a native button with stable dimensions. Enter and Space share the pointer path, repeated activation is guarded while pending, and retry stays reachable.
Reduced motion and performance
Use immediate state swaps when motion is reduced. Ignore late callbacks after unmount and prevent duplicate requests while pending.
Composition and anti-patterns
Let the control own a concise lifecycle; add Inline Save State when detailed field persistence or validation needs to remain beside an editor.