Skip to content
MIZU.

AsyncButton

An action whose feedback follows the real promise, with duplicate clicks prevented.

Live — this one is real

Usage

import { AsyncButton } from "mizu-ui";

export function Example() {
  return (
    <AsyncButton
      action={() => navigator.clipboard.writeText("Mizu")}
      successLabel="Copied"
    >
      Copy Mizu
    </AsyncButton>
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect status/AsyncButton.tsx

Source is included in the npm package under src/status/AsyncButton.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
action(signal: AbortSignal) => Promise<unknown>—Actual action. Signal aborts on unmount.
successLabelstring"Done"Completed action name.
onError(error: unknown) => void—Optional error reporting.

Accessibility

Pending retains the action label and disables repeat clicks. Errors are announced; a retry starts a fresh action.

Motion

Promise-driven state; no simulated delay.

Works alongside

StatusAlertProgressMeter