# ConfirmAction

Review a consequential action, execute the actual promise and recover from failure.

- Family: Interaction, imported from `mizu-ui` or `mizu-ui/interaction`
- Docs: https://mizu.user64bit.world/components/confirm-action
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/interaction/ConfirmAction.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import { ConfirmAction } from "mizu-ui";

export function Example() {
  const [archived, setArchived] = useState(false);
  return archived ? (
    <p role="status">Draft archived on this device.</p>
  ) : (
    <ConfirmAction
      label="Archive draft"
      title="Archive this draft?"
      confirmLabel="Archive"
      action={async () => {
        localStorage.setItem("mizu-demo-archived", "true");
      }}
      onSuccess={() => setArchived(true)}
    >
      The draft leaves your active list. This demonstration stores the result
      locally.
    </ConfirmAction>
  );
}
```

## 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/confirm-action
```

## Props

- `label / title / confirmLabel`: `string`. Trigger, modal name and final action.
- `action`: `(signal: AbortSignal) => Promise<unknown>`. Actual transaction; honor the signal for cancellation.
- `onSuccess / children`: `function / ReactNode`. Completion callback and review content.

## Accessibility

Native modal focus containment and restoration. Pending execution blocks duplicates; failure stays open for retry. Cancel/Escape unmount the action and abort its signal.

## Motion

Modal entrance respects reduced motion.