COMPONENT 51 · Overlays & Disclosure
警告对话框
Alert Dialog
也叫Confirmation DialogConfirm Modal确认弹窗NSAlert
要求用户确认高风险、不可逆或阻塞性决定的对话框。
A dialog that requires a decision about a high-risk, destructive, or blocking action.
ANATOMY & USAGE
结构与使用建议
组成部分
- 警告标题
- 后果说明
- 取消与确认操作
适合使用
- 删除、覆盖等行为后果严重且无法轻易撤销时。
不建议使用
- 普通成功消息或低风险、可撤销操作时。
键盘与无障碍
- 使用 alertdialog 与清楚标题；初始焦点置于最安全操作，并避免含糊的确定/取消标签。
DESCRIBE IT TO AI
这样告诉编程助手
实现警告对话框（Alert Dialog）：要求用户确认高风险、不可逆或阻塞性决定的对话框。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<div class="demo">
<button id="delete" type="button">删除项目</button>
<dialog role="alertdialog" aria-modal="true" aria-labelledby="alert-title" aria-describedby="alert-desc">
<h2 id="alert-title">确认删除？</h2>
<p id="alert-desc">此操作无法撤销。</p>
<button id="cancel" type="button">取消</button>
<button id="confirm" type="button">删除</button>
</dialog>
</div>