# AsyncButton

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

- Family: Status, imported from `mizu-ui` or `mizu-ui/status`
- Docs: https://mizu.user64bit.world/components/async-button
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/status/AsyncButton.tsx

## Usage

```tsx
"use client";

import { AsyncButton } from "mizu-ui";

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

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/async-button
```

## Props

- `action`: `(signal: AbortSignal) => Promise<unknown>`. Actual action. Signal aborts on unmount.
- `successLabel`: `string` (default `"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.