A simple and compact confirmation dialog of an action.
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.
The basic example supports the title and description props of confirmation.
descriptionis supported in version5.1.0.
import React from 'react';
import { message, Popconfirm } from 'antd';
const confirm = (e: React.MouseEvent<HTMLElement>) => {
console.log(e);
message.success('Click on Yes');
};
const cancel = (e: React.MouseEvent<HTMLElement>) => {
console.log(e);
message.error('Click on No');
};
const App: React.FC = () => (
<Popconfirm
title="Delete the task"
description="Are you sure to delete this task?"
onConfirm={confirm}
onCancel={cancel}
okText="Yes"
cancelText="No"
>
<a href="#">Delete</a>
</Popconfirm>
);
export default App;
There are 12 placement options available. Use arrowPointAtCenter if you want the arrow to point at the center of target.
import { Button, message, Popconfirm } from 'antd';
import React from 'react';
const text = 'Are you sure to delete this task?';
const description = 'Delete the task';
const confirm = () => {
message.info('Clicked on Yes.');
};
const App: React.FC = () => (
<>
<div style={{ marginLeft: 70, whiteSpace: 'nowrap' }}>
<Popconfirm
placement="topLeft"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>TL</Button>
</Popconfirm>
<Popconfirm
placement="top"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>Top</Button>
</Popconfirm>
<Popconfirm
placement="topRight"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>TR</Button>
</Popconfirm>
</div>
<div style={{ width: 70, float: 'left' }}>
<Popconfirm
placement="leftTop"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>LT</Button>
</Popconfirm>
<Popconfirm
placement="left"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>Left</Button>
</Popconfirm>
<Popconfirm
placement="leftBottom"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>LB</Button>
</Popconfirm>
</div>
<div style={{ width: 70, marginLeft: 304 }}>
<Popconfirm
placement="rightTop"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>RT</Button>
</Popconfirm>
<Popconfirm
placement="right"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>Right</Button>
</Popconfirm>
<Popconfirm
placement="rightBottom"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>RB</Button>
</Popconfirm>
</div>
<div style={{ marginLeft: 70, clear: 'both', whiteSpace: 'nowrap' }}>
<Popconfirm
placement="bottomLeft"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>BL</Button>
</Popconfirm>
<Popconfirm
placement="bottom"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>Bottom</Button>
</Popconfirm>
<Popconfirm
placement="bottomRight"
title={text}
description={description}
onConfirm={confirm}
okText="Yes"
cancelText="No"
>
<Button>BR</Button>
</Popconfirm>
</div>
</>
);
export default App;
#components-popconfirm-demo-placement .ant-btn {
margin-left: 0;
margin-right: 8px;
margin-bottom: 8px;
width: 70px;
text-align: center;
padding: 0;
}
#components-popconfirm-demo-placement .ant-btn-rtl {
margin-left: 8px;
margin-right: 0;
}Set icon props to customize the icon.
import React from 'react';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Popconfirm } from 'antd';
const App: React.FC = () => (
<Popconfirm
title="Delete the task"
description="Are you sure to delete this task?"
icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
>
<a href="#">Delete</a>
</Popconfirm>
);
export default App;
Asynchronously close a popconfirm when the OK button is pressed. For example, you can use this pattern when you submit a form.
import React from 'react';
import { Button, Popconfirm } from 'antd';
const App: React.FC = () => {
const confirm = () =>
new Promise((resolve) => {
setTimeout(() => resolve(null), 3000);
});
return (
<Popconfirm
title="Title"
description="Open Popconfirm with Promise"
onConfirm={confirm}
onOpenChange={() => console.log('open change')}
>
<Button type="primary">Open Popconfirm with Promise</Button>
</Popconfirm>
);
};
export default App;
Set okText and cancelText props to customize the button's labels.
import React from 'react';
import { Popconfirm } from 'antd';
const App: React.FC = () => (
<Popconfirm
title="Delete the task"
description="Are you sure to delete this task?"
okText="Yes"
cancelText="No"
>
<a href="#">Delete</a>
</Popconfirm>
);
export default App;
Make it pop up under some conditions.
import React, { useState } from 'react';
import { message, Popconfirm, Switch } from 'antd';
const App: React.FC = () => {
const [open, setOpen] = useState(false);
const [condition, setCondition] = useState(true);
const changeCondition = (checked: boolean) => {
setCondition(checked);
};
const confirm = () => {
setOpen(false);
message.success('Next step.');
};
const cancel = () => {
setOpen(false);
message.error('Click on cancel.');
};
const handleOpenChange = (newOpen: boolean) => {
if (!newOpen) {
setOpen(newOpen);
return;
}
// Determining condition before show the popconfirm.
console.log(condition);
if (condition) {
confirm(); // next step
} else {
setOpen(newOpen);
}
};
return (
<div>
<Popconfirm
title="Delete the task"
description="Are you sure to delete this task?"
open={open}
onOpenChange={handleOpenChange}
onConfirm={confirm}
onCancel={cancel}
okText="Yes"
cancelText="No"
>
<a href="#">Delete a task</a>
</Popconfirm>
<br />
<br />
Whether directly execute：
<Switch defaultChecked onChange={changeCondition} />
</div>
);
};
export default App;
Asynchronously close a popconfirm when a the OK button is pressed. For example, you can use this pattern when you submit a form.
import React, { useState } from 'react';
import { Button, Popconfirm } from 'antd';
const App: React.FC = () => {
const [open, setOpen] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const showPopconfirm = () => {
setOpen(true);
};
const handleOk = () => {
setConfirmLoading(true);
setTimeout(() => {
setOpen(false);
setConfirmLoading(false);
}, 2000);
};
const handleCancel = () => {
console.log('Clicked cancel button');
setOpen(false);
};
return (
<Popconfirm
title="Title"
description="Open Popconfirm with async logic"
open={open}
onConfirm={handleOk}
okButtonProps={{ loading: confirmLoading }}
onCancel={handleCancel}
>
<Button type="primary" onClick={showPopconfirm}>
Open Popconfirm with async logic
</Button>
</Popconfirm>
);
};
export default App;
| 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) | - |
Consult Tooltip's documentation to find more APIs.
Please ensure that the child node of Popconfirm accepts onMouseEnter, onMouseLeave, onFocus, onClick events.