Skip to content
Pinky UI

loading

Async Button

A width-preserving idle, loading, success and error action pattern.

  • loading
  • button
  • async
  • action
Variation of

Use Async Action Control when the full lifecycle and recovery state need to stay visible. Open Async Action Control

Live preview

Quick usage

usage
import { AsyncButton } from "@pinky-ui/systems";

<AsyncButton onAction={save}>Save changes</AsyncButton>

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.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • 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

Use an action button that reports idle, loading, success, and error while preserving its width.

Use when

Save, submit, invite, or retry has a short asynchronous lifecycle.

Avoid

Disabling the only recovery path or implying success before the callback resolves.

Accessibility

Expose busy state, keep the label meaningful, and provide error recovery.

Keyboard and touch

Use a native button and preserve Enter/Space activation with a clear touch target.

Reduced motion and performance

PressSpring resolves immediately when needed; callbacks and timers must not survive unmount.

Composition and anti-patterns

Use Inline Feedback for detailed validation and CircularProgressMorph for separate background work.

Open this skill on its own page