轻提示
Toast
别名:消息提示条吐司轻提示通知条snackbar自动消失提示右下角弹出的小提示
这是什么
在视口角落短暂出现、自动消失的小消息条，用来告知操作结果（已保存、已复制、上传完成）。 不打断当前流程，通常附一个操作入口（撤销、查看），停留约 3~5 秒后淡出。
名词辨析
Toast（Snackbar）是短暂的非打断反馈，自动消失；Alert 常驻；Modal 打断。Toast 不应放关键信息或要求必读。
交互实验室
试一试，再决定怎么用触发不同反馈，观察自动消失与手动关闭。
正在加载实验室…
使用时关注什么
- 01提示不能抢夺焦点，重要任务结果也要留在页面中。
- 02有操作的提示需要足够阅读和响应时间。
✓ 适用场景
- 操作成功、状态更新等轻量反馈
- 配合撤销动作（删除后可撤销）
- 后台任务完成通知（上传、导出）
✕ 不适用场景
- 必须被看到并处理的错误（改用 alert 或表单内联错误）
- 长消息或多条排队（改用通知中心）
- 需要用户做出决策（改用模态框）
常见形式
成功
Success
状态色圆点或对勾图标
错误
Error
危险色，停留更久或需手动关闭
带操作
Action
附撤销或查看按钮（snackbar 风格）
实现要点
position: fixedz-indextransform: translateYanimation固定在视口右下角或底部居中，入场 slide + fade、出场同理，全部用 transform 避免重排； 多条消息栈式叠放（新的在下面顶上来）。hover 时暂停自动关闭计时。 错误类可延长停留或要求手动关闭；尊重 prefers-reduced-motion。
平台 API
role="status"aria-live="polite"代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| ARIA | role="status" |
| shadcn/ui | Sonner / Toast Sonner 是 shadcn 生态最常用的 toast 库 |
| MUI | Snackbar |
| AntD | message / notification |
横向对比
查看完整对比 →相关概念
嵌在页面流内、带状态色底色的横条，用于必须被看见的消息：错误、警告、重要通知。 它占据文档流而不是覆盖内容，通常常驻直到问题被处理或用户手动关闭。
组件替代方案覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件相似概念操作结果以一条短提示从屏幕边缘滑入（常为底部或右上角）， 停留数秒后自动滑出。 动效分三段：滑入—停留—滑出， 方向与来源一致——从边缘来，回边缘去。
动效搭配使用用"先执行、给反悔窗口"的方式处理高风险操作：删除等动作立即生效并展示结果，同时在底部弹出 带倒计时的撤销条，窗口期内一键恢复，倒计时结束才真正提交。相比弹窗确认，它不打断操作流， 又比"确认一次就完"的弹窗多了一层真正可用的后悔药。
交互模式搭配使用容易混淆
Alert 常驻可含操作按钮；Toast 短暂、角落出现。
Tooltip 解释控件，Toast 反馈系统事件。