Feedback · Popconfirm
Used when the operation of the target element requires further confirmation from the user. Compared with Popover, it has a built-in series of configurable action buttons. Compared with Modal, it does not force full-screen centering, and the interaction is lighter.


How to import

Basic Usage

Popconfirm is based on the Tooltip component. Children support the same type as Tooltip. For details, please refer to Tooltip Cautions

Type collocation

Developers can use scenario-based OK Type/Cancel Type/icon Equal parameters are matched with different styles of bubble confirmation boxes.

Delay hide

onOk and onCancel can be closed after click through return Promise (supported after v2.19). When onCancel and onOk are triggered, the corresponding Button will automatically switch to loading: true
promise solve will close the bubble confirmation box, the bubble will remain when promise reject, and button loading will automatically switch to false

Use with Tooltip or Popover

Please refer to Use with Tooltip/Popover

API Reference

arrowPointAtCenterWhether the "small triangle" points to the center of the element, you need to pass in "showArrow = true" at the same timebooleanfalse0.34.0
cancelTextCancel button textstring"Cancel"
cancelButtonPropsProperties for cancel buttonobject0.29.0
cancelTypeCancel button typestring"tertiary"
contentContent displayedstring | ReactNode
defaultVisibleBubble box is displayed by defaultboolean0.19.0
disabledClick on the Pop confirmation box to see if the bubbles pop up.booleanfalse
getPopupContainerSpecify the parent DOM, and the pop-up layer will be rendered into the DOM. Customization needs to set position: relativeFunction():HTMLElement() => document.body
iconCustom pop bubble Icon iconReactNode
motionWhether there is animation when the drop-down list appears/hidden. You can customize animation by passing in an object that conforms to the structurebooleantrue
positionDirections, optional values: top, topLeft, topRight, leftTop, leftBottom, rightTop, rightTop, rightBottom, bottomLeft, bottomRight, bottomRightstring"bottomLeft"
okTextConfirm button textstring"Confirm"
okTypeConfirm button typestring"primary"
okButtonPropsConfirm button propsobject0.29.0
showArrowWhether to show arrow trianglebooleanfalse
stopPropagationWhether to prevent the click event on the bomb layer from bubblingbooleantrue0.34.0
positionPopup layer position,Optional value:top,topLeft,topRight,left,leftTop,leftBottom,
titleDisplayed titlestring|ReactNode
triggerTiming to trigger the display, optional value:hover / focus / click / customstring'click'
visibleWhether the bubble box displays controlled attributesboolean0.19.0
zIndexFloating layer z-index valuenumber1030
onConfirmClick the confirmation button to call back. Promise support after v2.19(e) => void | Promise
onCancelClick the Cancel button to call back. Promise support after v2.19(e) => void | Promise
onVisibleChangeBubble box toggle shows hidden callbacks(visible: boolean) => void() => {}0.19.0
onClickOutSideCallback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked(e: event) => void2.1.0

Design Tokens


  • Why does the Popconfirm floating layer lose its width and wrap unexpectedly when the width is not enough near the screen border?
    After Chromium 104, the wrapping rendering strategy when the width of the screen border text is not enough has changed. For details, see issue #1022, the semi-side has been This problem was fixed in v2.17.0.