一个 React 警告对话框，用于破坏性操作确认，采用 Liquid Glass 表面与固定取消/确认按钮。
AlertDialog 是可访问的模态确认组件。它内部渲染 Portal、遮罩、居中弹窗、标题、描述、可选正文以及固定的取消/确认操作。
基础示例使用受控模式：用 open 控制显示，触发按钮由页面自己渲染。它是模态的，点击遮罩不会关闭；但按 Escape 仍会关闭，并且不会调用 onCancel 或 onConfirm。如果 Escape 不应取消破坏性操作，请在 onOpenChange 中拦截。
open 与 onOpenChange 控制对话框。自己渲染按钮并把 open 设为 true 即可打开；onConfirm 与 onCancel 用于执行操作副作用。
No changes published.
children 会在描述和操作按钮之间渲染额外内容。
AlertDialog 渲染模态 alertdialog，由 title 命名，并由 description 描述。打开时焦点移动到浮层内，打开期间被限制在浮层中，关闭后返回触发器。
按 Escape 会关闭对话框，但不会调用 onCancel 或 onConfirm；如果按 Escape 不应关闭，请在 onOpenChange 中拦截。点击背景始终不会关闭警告对话框，因此请保留可见的取消操作。浮层焦点规则见可访问性指南。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | ReactNode | — | 对话框标题，必填。 |
description | ReactNode | — | 标题下方的说明文字。 |
children | ReactNode | — | 描述与操作按钮之间的额外内容。 |
cancelLabel | ReactNode | "Cancel" | 取消按钮文案。 |
confirmLabel | ReactNode | "Confirm" | 确认按钮文案。 |
onCancel | MouseEventHandler<HTMLButtonElement> | — | 点击取消时调用。 |
onConfirm | MouseEventHandler<HTMLButtonElement> | — | 点击确认时调用。 |
open | boolean | — | 受控的打开状态。 |
defaultOpen | boolean | false | 非受控时的初始打开状态。 |
onOpenChange | (open: boolean, details) => void | — | 对话框打开或关闭时调用。 |
onOpenChangeComplete | (open: boolean) => void | — | 打开或关闭动画结束后调用。 |
actionsRef | RefObject<Actions | null> | — | 命令式的 close 与 unmount 操作。 |
handle | AlertDialogHandle | — | 将对话框与外部触发器关联。 |
triggerId | string | null | — | 与对话框关联的触发器 ID。 |
defaultTriggerId | string | null | — | 初始打开时使用的触发器 ID。 |
className | string | — | 合并到弹窗的 Tailwind 类名。 |
style | CSSProperties | — | 内联样式，合并到与 className 相同的元素。 |
ui | { backdrop?: ClassValue; viewport?: ClassValue; popup?: ClassValue; glass?: ClassValue; overlay?: ClassValue; content?: ClassValue; title?: ClassValue; description?: ClassValue; body?: ClassValue; footer?: ClassValue } | — | 按 data-slot 组织的内部槽位类名。 |
| 属性 | 说明 |
|---|---|
data-open | 对话框打开时存在。 |
data-closed | 对话框关闭时存在。 |
data-starting-style | 对话框开始进入动画时存在。 |
data-ending-style | 对话框正在退出动画时存在。 |
data-nested | 对话框嵌套在另一个对话框内时存在。 |
data-nested-dialog-open | 对话框内部还有另一个对话框打开时存在。 |
data-slot | 标记内部部件（backdrop、viewport、popup、glass、overlay、content、title、description、body、footer），用于样式选择。 |
组件使用共享玻璃材质。可以在父级调整 --ui-glass-* token，用 className 控制布局，并通过 ui 按 data-slot 调整内部槽位。组件级数值位于 src/theme/alert-dialog.ts。Token 分层与预设见主题指南。