Popconfirm

Pop up a bubble confirmation box for an action.
Import

When To Use#

A simple and compact dialog is 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

The basic example.

expand codeexpand code
      Loading...
    

There are 12 placement options available.

expand codeexpand code
      Loading...
    

Set nzIcon to customize the icon.

expand codeexpand code
      Loading...
    

Asynchronously close a popconfirm when a the OK button is pressed. For example, you can use this pattern when you submit a form.

expand codeexpand code
      Loading...
    

Set okText and cancelText props to customise the button's labels.

expand codeexpand code
      Loading...
    
Delete a task

Whether directly execute:

Make it pop up under some conditions.

expand codeexpand code
      Loading...
    

Set [nzPopconfirmShowArrow]="false" to hide arrow.

expand codeexpand code
      Loading...
    

Asynchronously close a popconfirm when the OK button is pressed. For example, you can use this pattern when you submit a form.

expand codeexpand code
      Loading...
    

API#

[nz-popconfirm]#

ParamDescriptionTypeDefault value
[nzPopconfirmArrowPointAtCenter]Arrow point at center of the originbooleanfalse
[nzPopconfirmTitle]Title of the confirmation boxstring | TemplateRef<void>-
[nzPopconfirmTitleContext]The context of confirmation box titleobject-
[nzPopconfirmTrigger]Popconfirm trigger mode. If set to null it would not be triggered'click' | 'focus' | 'hover' | null'click'
[nzPopconfirmPlacement]The position of the popconfirm relative to the target'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | Array<string>'top'
[nzPopconfirmOrigin]Origin of the popconfirmElementRef-
[nzPopconfirmVisible]Show or hide popconfirmbooleanfalse
[nzPopconfirmShowArrow]Whether popconfirm has arrowbooleantrue
(nzPopconfirmVisibleChange)Callback of hide or showEventEmitter<boolean>-
[nzPopconfirmMouseEnterDelay]Delay in seconds, before popconfirm is shown on mouse enternumber0.15
[nzPopconfirmMouseLeaveDelay]Delay in seconds, before popconfirm is hidden on mouse leavenumber0.1
[nzPopconfirmOverlayClassName]Class name of the popconfirm cardstring-
[nzPopconfirmOverlayStyle]Style of the popconfirm cardobject-
[nzPopconfirmBackdrop]whether or not the overlay should attach a backdropbooleanfalse
ParamDescriptionTypeDefault valueGlobal Config
[nzCancelText]Text of the Cancel button (Deprecated, please use nzCancelButtonProps instead)string'Cancel'-
[nzOkText]Text of the Confirm button (Deprecated, please use nzOkButtonProps instead)string'Confirm'-
[nzOkType]Button type of the Confirm button (Deprecated, please use nzOkButtonProps instead)'primary' | 'ghost' | 'dashed' | 'danger' | 'default''primary'-
[nzOkDanger]Danger status of the OK button. Consistent with the nzDanger of the nz-button. (Deprecated, please use nzOkButtonProps instead)booleanfalse-
[nzOkDisabled]prevents a user from interacting with the OK button. Consistent with the disabled of the nz-button. (Deprecated, please use nzOkButtonProps instead)booleanfalse-
[nzOkButtonProps]config object of the ok buttonNzPopConfirmButtonPropsnull-
[nzCancelButtonProps]config object of the cancel buttonNzPopConfirmButtonPropsnull-
[nzCondition]Whether to directly emit onConfirm without showing Popconfirmbooleanfalse-
[nzIcon]Customize icon of confirmationstring | TemplateRef<void>--
[nzAutoFocus]Autofocus a buttonnull | 'ok' | 'cancel'null
[nzBeforeConfirm]The hook before the confirmation operation, decides whether to continue responding to the nzOnConfirm callback, supports asynchronous verification.(() => Observable<boolean> | Promise<boolean> | boolean) | nullnull-
(nzOnCancel)Callback of cancelEventEmitter<void>--
(nzOnConfirm)Callback of confirmationEventEmitter<void>--

Consult Tooltip's documentation to find more APIs.

Note#

Please ensure that the node of [nz-popconfirm] accepts onMouseEnter, onMouseLeave, onFocus, onClick events.