适用：响应用户的操作，提供操作结果反馈

不适用：用户操作之前的重要信息提醒

通用原则

• 因为是用户操作结果的告知，所以通常而言无需用户进一步操作

• Toast 被动出现，但也会自动消失，不会阻碍用户的任何操作流程。

• Toast 出现在屏幕的左下角，层级最高（不受其他内容的遮挡）。

构成

1. 容器

   1. 状态指示条

   2. 关闭Icon

2. Icon + 标题：Icon配合「状态指示条」，在视觉上快速告知用户当前反馈的类型：成功或者失败。标题则传递核心信息，直接告诉用户结果。

3. 操作（可选）：针对当前反馈的非直接相关操作，为 文字按钮，其重要性 > 描述中的 Link 。

4. 描述（可选）：对标题信息的详细描述。可带 Link ，其重要性 < 操作。

类型

类型	何时使用
告知（蓝）	对于用户操作的结果既无积极，也无消息影响的事实的告知。比如帮助、指南、辅助类信息等。
成功（绿）	当用户操作成果的时候，用以传达成功、积极的信息。
警示（黄）	当用户操作的结果有风险的时候，用以传达提醒与警示信息。此时用户当前的操作流程通常没有结束，所以建议不要有操作和 Link
失败（红）	当用户操作失败的时候，用以传达错误、失败等严重信息。此时用户当前的操作流程通常没有结束，所以建议不要有操作和 Link

行为

出现

在用户具体的操作之后触发，在页面左下角自动出现。

主动消失

可根据业务场景定义消失间隔，带描述信息的时候，默认为 5 秒；无描述信息的适合可适当缩短为 3 秒。

冻结

在主动消失的基础上，当用户鼠标 hover 该组件时，则停止消失计数，移出后再继续。

被动消失

用户可主动关闭。

实践案例

---

样式

布局

• 位于屏幕左下角，左侧间距与底部间距一致为 20px

• 层级最高，overlay 其他内容

• 一个页面中最多同时出现 4 个 Toast，之后最新的则强制挤掉最早出现的。