> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/confirm.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Confirm

Ask for confirmation before an important action. Call the API and await the user's choice.

## Configure the entry once

Wrap the application in `ConfigProvider` and call `useConfirm()` in a child component. Each confirmation inherits the caller's theme and language without managing open state.

```tsx
import { ConfigProvider } from '@ifhover/leaf-ui';

export function Root() {
  return <ConfigProvider><App /></ConfigProvider>;
}
```

## Async confirmation


Delete project

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/confirm/basic.tsx"
import { Button, Space, useConfirm, useMessage } from '@ifhover/leaf-ui';

export function ConfirmBasic() {
  const { confirm } = useConfirm();
  const { message } = useMessage();
  return (
    <Space direction="vertical" align="center">
      <Button
        danger
        variant="outline"
        onClick={async () => {
          const accepted = await confirm({
            title: 'Delete project',
            children: 'This cannot be undone. Continue?',
            type: 'danger',
            onConfirm: () => new Promise((resolve) => setTimeout(resolve, 900)),
          });
          if (accepted) message.success('Project deleted');
        }}
      >
        Delete project
      </Button>
    </Space>
  );
}
```

Expand code

## useConfirm API

The returned object is [`ConfirmApi`](#confirmapi).

| Prop      | Type                                                               | Default | Description                                                             |
| --------- | ------------------------------------------------------------------ | ------- | ----------------------------------------------------------------------- |
| `confirm` | [`(options: ConfirmOptions) => Promise<boolean>`](#confirmoptions) | —       | Resolves true on confirmation, false on cancellation or caller unmount. |

## ConfirmOptions

| Property             | Type                                                                                          | Default                           | Description                                                                |
| -------------------- | --------------------------------------------------------------------------------------------- | --------------------------------- | -------------------------------------------------------------------------- |
| `initialFocus`       | `RefObject<HTMLElement \| null> \| (() => HTMLElement \| null)`                               | —                                 | Initial focus target.                                                      |
| `returnFocus`        | `boolean \| RefObject<HTMLElement \| null> \| (() => HTMLElement \| null)`                    | —                                 | Return focus after closing; set a target or disable with false.            |
| `title`              | `ReactNode`                                                                                   | —                                 | Confirmation heading.                                                      |
| `children`           | `ReactNode`                                                                                   | —                                 | A short explanation of the action's consequences.                          |
| `icon`               | `ReactNode`                                                                                   | —                                 | Semantic icon beside the explanation; null hides the icon.                 |
| `type`               | `'default' \| 'danger' \| 'success' \| 'warning' \| 'info'`                                   | `'default'`                       | Semantic icon and color; only danger changes the confirm button color.     |
| `showCancel`         | `boolean`                                                                                     | false for success; otherwise true | Show the cancel button.                                                    |
| `confirmText`        | `ReactNode`                                                                                   | Locale default                    | Confirm button label.                                                      |
| `cancelText`         | `ReactNode`                                                                                   | Locale default                    | Cancel button label.                                                       |
| `confirmButtonProps` | [`ButtonProps`](https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/button.md#button-api) | —                                 | Confirm button props.                                                      |
| `cancelButtonProps`  | [`ButtonProps`](https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/button.md#button-api) | —                                 | Cancel button props.                                                       |
| `onConfirm`          | `() => void \| Promise<void>`                                                                 | —                                 | Close after success; keep the dialog open and show the error on rejection. |
| `onCancel`           | `() => void`                                                                                  | —                                 | Called on cancellation.                                                    |
| `width`              | `number \| string`                                                                            | `420`                             | Dialog width, in pixels for numbers.                                       |
| `closable`           | `boolean`                                                                                     | `false`                           | Show a close button in the corner.                                         |
| `maskClosable`       | `boolean`                                                                                     | `false`                           | Cancel when the backdrop is clicked.                                       |
| `keyboard`           | `boolean`                                                                                     | `true`                            | Cancel when Escape is pressed.                                             |
| `className`          | `string`                                                                                      | —                                 | Dialog class name.                                                         |
| `style`              | `CSSProperties`                                                                               | —                                 | Dialog styles.                                                             |

## ConfirmProvider API

Use `ConfirmProvider` at the entry when `ConfigProvider` is absent. An explicit provider can also create an independent queue for a region.

```tsx
import { ConfirmProvider } from '@ifhover/leaf-ui';

export function Root() {
  return <ConfirmProvider><App /></ConfirmProvider>;
}
```

| Property   | Type        | Default | Description                                 |
| ---------- | ----------- | ------- | ------------------------------------------- |
| `children` | `ReactNode` | —       | Components sharing this confirmation queue. |

## ConfirmApi

| Property  | Type                                                                   | Default | Description                                          |
| --------- | ---------------------------------------------------------------------- | ------- | ---------------------------------------------------- |
| `confirm` | `(options: `[`ConfirmOptions`](#confirmoptions)`) => Promise<boolean>` | —       | Required. Request confirmation and await the choice. |

## Types

Import these types when composing options.

```ts
import type { ConfirmOptions, ConfirmApi, ConfirmProviderProps } from '@ifhover/leaf-ui';
```

## Usage

`useConfirm()` returns `{ confirm }`. Requests sharing an entry appear in sequence, after the previous dialog finishes closing. Async confirmation shows loading and prevents duplicate actions; rejected actions keep the dialog open with an error and can be retried.

The default type has no status icon. Info, warning, success and danger show a bare semantic icon beside the content; danger uses a red exclamation mark. Success hides the cancel button unless `showCancel` is set.

Confirm is an API-only prompt for brief decisions. Use [Modal](https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/modal.md) for forms, multiple steps or complex content.