AlertDialog

确认对话框（AlertDialog）用于在执行删除、提交、覆盖等关键操作前，要求用户做出明确决策。

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogOverlay,
  AlertDialogTitle
} from '@skyroc/web-ui';

何时使用

• 操作具有风险或不可逆，需要用户再次确认时（如删除数据、重置配置）。
• 流程需要被临时阻塞，必须等待用户确认或取消后才能继续。
• 需要用明确的标题、描述和操作按钮说明决策后果时。
• 普通页面提示使用 Alert；通用内容弹窗使用 Dialog；需要确认关键操作时使用 AlertDialog。

语义类型

通过 type 设置确认对话框的语义类型。组件会根据类型显示对应的默认图标，帮助用户快速识别操作性质。

尺寸

通过 size 调整对话框的宽度、间距、字号和按钮区域间距，从 xs 到 2xl 共 6 个尺寸。

自定义图标

通过 icon 传入自定义图标或视觉元素。传入 icon 后会覆盖 type 对应的默认图标。

按钮与页脚

默认页脚包含取消按钮和确认按钮。通过 showCancel={false} 可以隐藏取消按钮；通过 okText 和 cancelText 修改按钮文本；通过 onOk 和 onCancel 监听用户操作。

如果需要完全自定义页脚内容，可通过 footer 传入 React 节点；设置为 null 或 false 时隐藏页脚。

自定义样式

通过 classNames 精细控制各个 slot 的 class，包括 overlay、content、header、title、description、footer 和 icon。

也可以通过 contentProps、headerProps、titleProps、descriptionProps、footerProps、overlayProps 分别向对应结构组件传入额外属性。

API

AlertDialog

通用属性参考：基于 Radix UI AlertDialog，支持底层根组件、Portal、Overlay 和 Content 的相关属性。

子组件

AlertDialog 也导出基础结构组件，适合在需要更细粒度组合时使用。

类型