2.9 KiB
| category | group | title | description | cover | coverDark | demo | ||
|---|---|---|---|---|---|---|---|---|
| Components | Feedback | Popconfirm | Pop up a bubble confirmation box for an action. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a7tqQ6wrdeAAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*iwYsQpeFcB0AAAAAAAAAAAAADrJ8AQ/original |
|
When To Use
A simple and compact dialog used for asking for user confirmation.
The difference with the confirm modal dialog is that it's more lightweight than the static popped full-screen confirm modal.
Examples
Basic
Locale text
Placement
Conditional trigger
Customize icon
Asynchronously close
Asynchronously close on Promise
_InternalPanelDoNotUseOrYouWillBeFired
Wireframe
API
Common props ref：Common props
| Param | Description | Type | Default value | Version |
|---|---|---|---|---|
| cancelButtonProps | The cancel button props | ButtonProps | - | |
| 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 /> | |
| okButtonProps | The ok button props | ButtonProps | - | |
| okText | The text of the Confirm button | string | OK |
|
| okType | Button type of the Confirm button |
string | primary |
|
| showCancel | Show cancel button | boolean | true | 4.18.0 |
| title | The title of the confirmation box | ReactNode | () => ReactNode | - | |
| description | The description of the confirmation box title | ReactNode | () => ReactNode | - | 5.1.0 |
| onCancel | A callback of cancel | function(e) | - | |
| onConfirm | A callback of confirmation | function(e) | - | |
| onPopupClick | A callback of popup click | function(e) | - | 5.5.0 |
Consult Tooltip's documentation to find more APIs.
Design Token
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.
Note
Please ensure that the child node of Popconfirm accepts onMouseEnter, onMouseLeave, onFocus, onClick events.