Bottom Sheet
A panel that rises from the bottom of the screen: share, filter, pick a variant — thumb-reachable, swipe down to dismiss.
Modal Dialog
对话框（弹窗）
A box that appears center-screen over a dimmed backdrop: confirm a deletion, fill a small form, decide now.
All platformsOverlaysOverlayComponent
大白话说明
对话框用「打断」换取注意力：遮罩压暗背景，焦点锁在框内，逼用户先做完这一个决定。标题说清要决定什么，正文给后果，主按钮放右且用危险色标危险动作。
什么时候用
不可逆操作确认、必须先完成的短表单、关键信息的一次性告知。
什么时候不用
内容超过一屏、或需要查阅背景页面信息时别用弹窗——用户被锁在框里看不到外面，应该用新页面或抽屉。
细节与变体
- 弹窗最多套一层，弹窗里再弹弹窗是设计事故
- 键盘 Esc 能关、焦点进来先落在最安全的按钮上（取消而非确认删除）
- 主按钮文案写具体动作（删除这篇文章），不要写「确定」
配套效果见下方「可用效果」。
Matching prompt (fill in & copy)
Effects you can apply
Reference implementations (open source)
- Radix UI ↗ MIT · 免费（MIT）
Unstyled primitives that get behavior right: keyboard, focus, and ARIA for overlays and controls.
- shadcn/ui ↗ MIT · 免费（MIT）
Copy-paste component source built on Radix and Tailwind — you own the code, and AI tools know it best.
- Chakra UI ↗ MIT · 免费（MIT）
An accessibility-first React component library with prop-based styling.