Alert Dialog 警告对话框
在继续危险或不可逆操作前，要求用户明确理解并确认后果。
使用概览
适合使用
- 删除、覆盖或退出未保存内容等操作需要阻断确认时。
不建议使用
- 普通信息提示或用户可以轻易撤销的低风险操作时。
真实示例
删除项目确认
在不可逆删除前明确说明后果并要求确认。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/alert-dialog.json基础用法
导入
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction } from "@richardqiu/quartz/alert-dialog";JSX
<AlertDialog><AlertDialogTrigger>删除项目</AlertDialogTrigger><AlertDialogContent><AlertDialogTitle>确认删除项目？</AlertDialogTitle><AlertDialogDescription>删除后无法恢复。</AlertDialogDescription><AlertDialogCancel>取消</AlertDialogCancel><AlertDialogAction>确认删除</AlertDialogAction></AlertDialogContent></AlertDialog>状态与控制摘要
默认
键盘焦点可见
已打开
已关闭
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
open | boolean | false | 受控指定警告对话框当前是否打开。 |
组合结构
- 01
AlertDialog - 02
AlertDialogTrigger - 03
AlertDialogContent - 04
AlertDialogHeader - 05
AlertDialogTitle - 06
AlertDialogDescription - 07
AlertDialogFooter - 08
AlertDialogCancel - 09
AlertDialogAction
键盘约定
- 初始焦点落在取消操作，Tab 保持在对话框内，Escape 返回触发器。
可访问性契约
- 标题与说明必须在操作可用前解释后果。
- 点击外部不会关闭；取消必须明确可见，危险操作仍由业务处理错误与结果。