气泡确认框Popconfirm

你可能会说

点删除时在按钮旁边冒一句“确定吗”，别直接弹大窗。

触发危险或关键操作时在控件就近浮现的目标二次确认浮层。移除一个可恢复的标签时可在按钮旁确认“确定移除吗？”。永久删除或转账等高风险操作需要更完整说明，应使用弹窗 Modal。
先知道
气泡卡片 Popover弹窗 Modal
也常被叫作气泡确认框就近确认框行内确认
⚠确认删除这条记录？
取消确定
删除

什么时候用

  • 可恢复的轻量操作：误点会麻烦，但后果容易撤销
    ⚠ 确认删除这条记录？
    取消确定
    删除
  • 列表行内操作：在当前上下文中完成确认
    确认删除？
    取消确定
  • 移出成员 / 取消关注：可逆的小动作
    确认移出成员「林小hu」？
    取消确定
    移出
  • 清空输入：避免误清除已填写内容
    清空全部输入？
    取消清空
    清空

什么时候不用

  • 不可逆的高风险操作：使用 弹窗 Modal 提供完整确认
    ⚠ 确认删除全部 1,024 条数据？此操作不可恢复！
    取消确定删除
    删除全部
  • 说明文字较长：使用 弹窗 Modal 承载完整内容
    删除后，项目下的文件、成员和配置都会被清除，且无法通过任何方式恢复，请确认你已经备份好重要数据。
    取消删除
  • 只需展示信息：使用 气泡卡片 Popover 或 文字提示 Tooltip
    💡 支持拖拽调整排序
    取消知道了
    悬停我
  • 连续要求多次确认：应改进触发条件或操作流程
    确认删除？
    确定
    再确认一次？
    确定
组成结构 · Anatomy
⚠确认删除这条记录？
取消确定
删除
挂在触发按钮旁边的小卡片，不遮罩
一句话问清，常配 ⚠ 图标
确定 / 取消，确定可以说清后果
点击才弹出，气泡始终指着它
常见变体 · Variants
默认确认Default
确认移出该成员？
取消确定
移出
后果可恢复的轻量操作防误点，如移出成员
警示确认Warning
⚠清空全部输入？
取消清空
清空
清空已填写内容等存在误操作风险时
危险确认Danger
⚠确认删除这条记录？
取消删除
删除
删除类操作，确认按钮标红强调后果
典型使用场景
删除列表行
⚠确认删除这条记录？
取消删除
📄 首页改版.fig 2 小时前 删除
移出成员
确认移出成员「林小hu」？
取消确定
林小hu · 产品经理 移出
清空表单
⚠清空全部输入？
取消清空
清空
取消发布
确认取消发布？文章将转为草稿。
取消确定
📝 夏季活动方案 已发布 取消发布