Toast
轻提示
WebMobileDesktop上手难度: 容易
操作完成后屏幕角落飘出来的小提示，几秒后自己消失。
Live Demo
真的可以点你刚才看到的这个：微信发出消息后顶部飘过的「已发送」、图片保存后右下角闪过的「已保存到相册」——都是 Toast。
它到底是什么
Toast 只说一件事：「你刚才的操作成功了」。它没有按钮（需要操作就该用 Snackbar），不阻断用户，几秒自动消失。中文语境里也叫「轻提示」。
toast轻提示浮动提示短暂提示notification小提示
Anatomy · 它由什么组成
Container容器
深色底白字，圆角 8px
Icon图标
成功 ✓ / 失败 ! / 信息 i
Message文案
一句话，≤20 字
Duration时长
2–4 秒自动消失
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 操作成功，需要一句确认 | 用 |
| 不打断用户当前操作 | 用 |
| 信息简单，无需用户做任何事 | 用 |
| 需要用户做出选择（撤销 / 重试） | 不用 |
| 传递严重错误 | 不用 |
Toast 里放「撤销」按钮那就变成 Snackbar 了，别混用。
连续操作时会堆叠成一列 Toast，看起来像出了错。
Similar Patterns
别搞混一句话区分：操作完成后屏幕角落飘出来的小提示，几秒后自己消失。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
保存成功后显示 Toast「照片已保存」，深色底白字，带对勾图标，屏幕顶部居中，2.5 秒后自动淡出。
不要只对 AI 说
Bad → Better不要这样对 AI 说
操作完给个提示。
改成这样说
操作成功后弹 Toast：深色底白字、圆形图标、顶部居中、3 秒自动淡出，role="status" + aria-live="polite"，重复触发时替换而非堆叠。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。