Popconfirm

A simple and compact confirmation dialog of an action.

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

The basic example supports the title and description props of confirmation.

description is supported in version 5.1.0.

Placement

There are 12 placement options available. Use arrow: { pointAtCenter: true } if you want the arrow to point at the center of target.

Customize icon

Set icon props to customize the icon.

Asynchronously close on Promise

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

Locale text

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

Conditional trigger

Make it pop up under some conditions.

Asynchronously close

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

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

Component Token

Global Token

Note

Please ensure that the child node of Popconfirm accepts onMouseEnter, onMouseLeave, onFocus, onClick events.

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

Namu Design

Popconfirm

Namu Design

Popconfirm

When To Use

Examples

API

Design Token

Component Token

Global Token

Note

When To Use

Examples

API

Design Token

Component Token

Global Token

Note

PopconfirmChangelog

PopconfirmChangelog

When To Use

Examples

API

Design Token

Component Token

Global Token

Note

When To Use

Examples

API

Design Token

Component Token

Global Token

Note

Popconfirm

Popconfirm