---
title: Popconfirm - 气泡确认框
order: 14
path: /Popconfirm
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 7
  title: 反馈组件
  path: /feedback
---

定义：气泡确认框通常用于不会造成严重后果

## 基础气泡确认框

使用说明文字及操作按钮对较简单的操作进行

#### 基础使用

<code src="./demos/base.tsx" background="#fff" height="400px"/>

## 带图标的气泡确认框

在说明文字之前增加图标，如普通、警示及告警等图标，增强表达以更好的引起用户注意。

<code src="./demos/types.tsx" background="#fff" height="400px"/>

## 带描述的气泡确认框

在主要说明文字之外增加了操作相关的详细描述，对较复杂的，可能造成疑惑的操作进行详细描述。

<code src="./demos/contentPopconfirm.tsx" background="#fff" height="400px"/>

## 不同位置的气泡确认框

气泡确认框支持 12 个不同的方位。

<code src="./demos/placement.tsx" background="#fff" height="400px"/>

## API

| 参数              | 说明                                       | 类型                                   | 默认值                   |
| ----------------- | ------------------------------------------ | -------------------------------------- | ------------------------ |
| cancelButtonProps | cancel 按钮 props                          | [ButtonProps](/components/button/#API) | -                        |
| cancelText        | 取消按钮文字                               | string                                 | `取消`                   |
| disabled          | 阻止点击 Popconfirm 子元素时弹出确认框     | boolean                                | false                    |
| icon              | 自定义弹出气泡 Icon 图标                   | ReactNode                              | &lt;ExclamationCircle /> |
| okButtonProps     | ok 按钮 props                              | [ButtonProps](/components/button/#API) | -                        |
| okText            | 确认按钮文字                               | string                                 | `确定`                   |
| okType            | 确认按钮类型                               | string                                 | `primary`                |
| content           | 描述内容                                   | ReactNode                              | -                        |
| type              | 增加图标，可选 `primary` `warning` `error` | string                                 | -                        |
| showCancel        | 是否显示取消按钮                           | boolean                                | true                     |
| title             | 确认框的描述                               | ReactNode \| () => ReactNode           | -                        |
| onCancel          | 点击取消的回调                             | function(e)                            | -                        |
| onConfirm         | 点击确认的回调                             | function(e)                            | -                        |

更多属性请参考 [Tooltip](../dataShow/tooltip#共同的-api)。

## 注意

请确保 `Popconfirm` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。