Alert Dialog
Alert dialog component for critical actions that require user confirmation. Cannot be closed by clicking outside.
基础示例
删除确认
退出确认
危险操作确认
可点击外部关闭
If you need to close by clicking outside, use the Dialog component instead of AlertDialog. AlertDialog is designed for scenarios that require forced user selection.
Dialog（可点击外部关闭）
AlertDialog（必须选择）
动画效果
自定义对话框动画
Using framer-motion to implement different entrance effects
内容动画效果
Animation effects for elements inside the dialog
成功状态动画
更多变体
强调色操作
多按钮布局
同步确认
紧凑布局
使用说明
When to Use Alert Dialog
- Irreversible operations like deleting data
- Exiting with unsaved changes
- Critical operations requiring explicit user confirmation
- Important process confirmations like payments or submissions
Difference from Dialog
- Alert Dialog requires explicit user selection to close
- Clicking overlay does not close Alert Dialog
- Pressing Escape key does not close Alert Dialog
- Better suited for scenarios requiring forced user choice