2016-08-26 14:42:41 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: Feedback
2016-08-26 15:07:46 +08:00
title: Popconfirm
2024-03-22 14:22:42 +08:00
description: Pop up a bubble confirmation box for an action.
2024-01-29 14:50:36 +08:00
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a7tqQ6wrdeAAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*iwYsQpeFcB0AAAAAAAAAAAAADrJ8AQ/original
2022-11-09 12:28:04 +08:00
demo:
cols: 2
2016-08-26 14:42:41 +08:00
---
2016-09-10 13:43:30 +08:00
## When To Use
2016-08-26 14:42:41 +08:00
2017-09-11 11:08:53 +08:00
A simple and compact dialog used for asking for user confirmation.
2016-08-26 14:42:41 +08:00
2017-09-11 11:08:53 +08:00
The difference with the `confirm` modal dialog is that it's more lightweight than the static popped full-screen confirm modal.
2016-08-26 14:42:41 +08:00
2022-11-09 12:28:04 +08:00
## Examples
2022-11-17 17:31:26 +08:00
<!-- prettier - ignore -->
2022-11-09 12:28:04 +08:00
< code src = "./demo/basic.tsx" > Basic< / code >
< code src = "./demo/locale.tsx" > Locale text< / code >
< code src = "./demo/placement.tsx" > Placement< / code >
2024-07-11 10:03:12 +08:00
< code src = "./demo/shift.tsx" iframe = "300" > Auto Shift< / code >
2022-11-09 12:28:04 +08:00
< code src = "./demo/dynamic-trigger.tsx" > Conditional trigger< / code >
< code src = "./demo/icon.tsx" > Customize icon< / code >
< code src = "./demo/async.tsx" > Asynchronously close< / code >
< code src = "./demo/promise.tsx" > Asynchronously close on Promise< / code >
< code src = "./demo/render-panel.tsx" debug > _InternalPanelDoNotUseOrYouWillBeFired< / code >
2022-12-06 23:14:30 +08:00
< code src = "./demo/wireframe.tsx" debug > Wireframe< / code >
2022-11-09 12:28:04 +08:00
2016-08-26 14:42:41 +08:00
## API
2023-08-08 18:27:48 +08:00
Common props ref：
2021-10-29 08:50:01 +08:00
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
2022-12-22 14:12:26 +08:00
| cancelButtonProps | The cancel button props | [ButtonProps ](/components/button/#api ) | - | |
2021-10-29 08:50:01 +08:00
| cancelText | The text of the Cancel button | string | `Cancel` | |
| disabled | Whether show popconfirm when click its childrenNode | boolean | false | |
| icon | Customize icon of confirmation | ReactNode | < ExclamationCircle /> | |
2022-12-22 14:12:26 +08:00
| okButtonProps | The ok button props | [ButtonProps ](/components/button/#api ) | - | |
2021-10-29 08:50:01 +08:00
| okText | The text of the Confirm button | string | `OK` | |
| okType | Button `type` of the Confirm button | string | `primary` | |
2021-12-28 13:29:43 +08:00
| showCancel | Show cancel button | boolean | true | 4.18.0 |
2021-10-29 08:50:01 +08:00
| title | The title of the confirmation box | ReactNode \| () => ReactNode | - | |
2022-12-08 16:39:42 +08:00
| description | The description of the confirmation box title | ReactNode \| () => ReactNode | - | 5.1.0 |
2021-10-29 08:50:01 +08:00
| onCancel | A callback of cancel | function(e) | - | |
| onConfirm | A callback of confirmation | function(e) | - | |
2023-05-11 15:44:55 +08:00
| onPopupClick | A callback of popup click | function(e) | - | 5.5.0 |
2016-12-22 12:00:57 +08:00
2022-12-22 14:12:26 +08:00
Consult [Tooltip's documentation ](/components/tooltip/#api ) to find more APIs.
2017-01-22 14:26:46 +08:00
2023-04-11 10:25:24 +08:00
## Design Token
< ComponentTokenTable component = "Popconfirm" > < / ComponentTokenTable >
2024-03-24 23:06:04 +08:00
## FAQ
### Why does the warning findDOMNode is deprecated some times appear in strict mode?
This is due to the implementation of `rc-trigger` . `rc-trigger` forces children to accept ref, otherwise it will fall back to findDOMNode, so children need to be native html tags. If not, you need to use `React.forwardRef` transparently passes `ref` to native html tags.
2017-01-22 14:26:46 +08:00
## Note
2017-09-11 11:08:53 +08:00
Please ensure that the child node of `Popconfirm` accepts `onMouseEnter` , `onMouseLeave` , `onFocus` , `onClick` events.
