# ConfirmAction

> Inline two-step confirmation for a destructive action; no modal, no lost context.

Source: https://ui.jcsoftdev.com/docs/components/confirm-action

Inline two-step confirmation for a destructive action; no modal, no lost context.

## Import

```ts
import { ConfirmAction } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/confirm-action`.

## Usage

```tsx
<ConfirmAction
  label="Anular pedido"
  confirmLabel="Sí, anular pedido"
  consequence="El pedido de Marco Salazar se anula y su pago de S/ 45 se devuelve."
  onConfirm={succeed}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` * | `string` |  | Trigger label, a verb in the user's words ("Cancel order"). |
| `consequence` * | `string` |  | What will happen, said plainly, shown before the user commits. |
| `confirmLabel` | `string` |  | Label of the destructive button. Defaults to the localized "Confirm". |
| `cancelLabel` | `string` |  |  |
| `onConfirm` * | `() => Promise<ConfirmResult> \| Promise<void>` |  | Runs on confirm. Return `{ ok: false, error }` or throw to keep the step open with a message. |
| `triggerVariant` | `"danger" \| "primary" \| "secondary" \| "ghost"` | `"secondary"` |  |
| `className` | `string` |  |  |
| `classNames` | `Partial<Record<ConfirmActionPart, string>>` |  | Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/containers-confirmaction--default)
- [Returns An Error](/storybook/?path=/story/containers-confirmaction--returns-an-error)
- [Throws](/storybook/?path=/story/containers-confirmaction--throws)

## Source

`packages/ui/src/containers/confirm-action/confirm-action.tsx`