# Popconfirm

- Page: https://jiguang132.com/resources/arco-design/docs/popconfirm
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

A simple confirmation box of an action.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: The simplest usage.
- **Internationalization**: Custom button text.
- **Position**: The Popconfirm supports 12 different directions. They are: `top left`, `top`, `top right`, `bottom left`, `bottom`, `bottom right`, `left top`, `left`, `left bottom`, `right top`, `right` , `bottom right`.
- **Delay close**: Used to perform certain operations asynchronously, and close the popup after the operation is completed. **Usage**: Return a `Promise` for asynchronous closing.
- **Customize icon**: Customize icon.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Popconfirm

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|autoFocus|Whether to automatically focus the first focusable element in the confirmation box|boolean |`-`|-|
|defaultPopupVisible|Whether the confirmation box is visible by default|boolean |`-`|-|
|disabled|whether to disabled|boolean |`-`|2.11.0|
|focusLock|Whether to lock the focus in the confirmation box|boolean |`-`|-|
|popupVisible|Whether the confirmation box is visible|boolean |`-`|-|
|unmountOnExit|Whether to destroy the confirmation box when hidden|boolean |`true`|-|
|okType|The type of the ok button|ButtonProps['type'] |`primary`|-|
|position|The position of the confirmation box relative to the target.|\| 'top'\| 'tl'\| 'tr'\| 'bottom'\| 'bl'\| 'br'\| 'left'\| 'lt'\| 'lb'\| 'right'\| 'rt'\| 'rb' |`top`|-|
|trigger|Trigger mode|[TriggerProps](trigger#trigger)['trigger'] |`click`|-|
|cancelText|The text of the cancel button|ReactNode |`-`|-|
|icon|Customize icon of the confirmation box|ReactNode |`<IconExclamationCircleFill />`|-|
|okText|The text of the ok button|ReactNode |`-`|-|
|cancelButtonProps|The props of the cancel button|ButtonProps |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|okButtonProps|The props of the ok button|ButtonProps |`-`|-|
|onOk|Callback when click the ok button. Callback `event` params is supported in `2.29.0`|(e: React.MouseEvent) =&gt; Promise&lt;any&gt; \| void |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|triggerProps|The Props of the `Trigger` component|Partial&lt;[TriggerProps](trigger#trigger)&gt; |`-`|-|
|content|Content of PopconfirmFunction types are supported in `2.48.0`|ReactNode \| (() => ReactNode) |`-`|2.44.0|
|getPopupContainer|The parent node which the confirmation box will be rendered to.|(node: HTMLElement) => Element |`-`|-|
|onCancel|Callback when click the cancel button. Callback `event` params is supported in `2.29.0`|(e: React.MouseEvent) => void |`-`|-|
|onVisibleChange|Callback when the visibility of the confirmation box is changed|(visible: boolean) => void |`-`|-|
|title|Title of Popconfirm. Function types are supported in `2.48.0`|ReactNode \| (() => ReactNode) |`-`|-|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt