Type keyword

Pop confirm

The Popconfirm component is a user interface element commonly found in web applications and design systems. It serves as a confirmation prompt that appears when a user triggers an action that could have significant consequences. Its primary purpose is to confirm the user's intention before carrying out a potentially irreversible or impactful action.

Variant

Here are some types of popconfirm, including:

Top

Bottom

Right

Left

Anatomy

  1. Icon
  2. Arrow Popup
  3. Messages
  4. CTA Action

Usage

The Popconfirm component is best utilized in user interfaces when you want to ensure that users consciously confirm their intention before executing an action that might have significant consequences. Here are some scenarios where using a Popconfirm can be beneficial:

import React from 'react';
import type { PopconfirmProps } from 'antd';
import { Button, message, Popconfirm } from 'antd';

const confirm: PopconfirmProps['onConfirm'] = (e) => {
  console.log(e);
  message.success('Click on Yes');
};

const cancel: PopconfirmProps['onCancel'] = (e) => {
  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"
  >
    <Button danger>Delete</Button>
  </Popconfirm>
);

export default App;