---
title: Toast
slug: Toast
category: 组件
figma_node_id: 1:41
figma_page_name: ＞Toast
aliases: [Toast, Message, 轻提示, snackbar]
last_extracted: 2026-05-19
status: ok
---

# Toast

> 轻量、非阻断式的反馈提示。不会影响用户操作，用户可以不与回应，通常有时间限制，**出现 2s 就会自动消失**。在页面居中展示；文言提示尽量简短，最大宽度视情况由设计师自行判断，**不建议文字过多**。

## 类型与号型

按是否带图标分两类：

| 类型 | 形态 | 适用 |
|---|---|---|
| 纯文字 Toast | 仅一行文案的胶囊（130 × 40 / 246 × 40） | 一般成功 / 失败 / 提示反馈 |
| ICON+文字 Toast | 上图标下文字的方形卡（102 × 102） | 已完成 / 加载中 / 加载失败 |

ICON+文字 共 3 个组件实例（来自 Figma `componentSets`）：

| Figma 组件名 | 用途 |
|---|---|
| `Toast/移动端/ICON+文字/已完成` | 操作成功（对勾图标） |
| `Toast/移动端/ICON+文字/加载中` | 异步操作进行中（loading 图标） |
| `Toast/移动端/ICON+文字/加载失败` | 操作失败（错误图标） |
| `Toast/移动端/纯文字` | 不带图标的轻提示 |

按平台分两套：

| 平台 | 规范画板 |
|---|---|
| 桌面端 Toast | 1280 × 1246px（`layout_E55P71`） |
| 移动端 Toast | 1280 × 4755px（`layout_3CBQRL`） |

## 尺寸规格

数值取自 Figma `globalVars` 中各 layout token：

| 元素 | 宽 × 高 | 来源 |
|---|---|---|
| 桌面端规范画板 | 1280 × 1246px | `layout_E55P71` |
| 移动端规范画板 | 1280 × 4755px | `layout_3CBQRL` |
| 桌面端 Toast 示例容器 | 960 × 640px | `layout_IHS0XE`（白底底板） |
| 桌面端纯文字 Toast 胶囊（编组 9） | 130 × 40px | `layout_3863L7` |
| 移动端 ICON+文字（已完成、加载中、加载失败） | 102 × 102px | `layout_UP9E4H / ODEFQO / 6LDKK5` |
| 移动端纯文字 Toast 胶囊 | 130 × 40 / 246 × 40px | `layout_UWUUKQ`：130×40，`layout_IRYH5G`：246×40（长版） |
| 移动端手机示例画板 | 375 × 812px | `layout_7SFVMT / HLYP59 / GLM0FR / W79NZE`（4 个手机示例） |
| 章节标题"基础规则 / 示例 / 特殊情况" | 96 × 24 / 48 × 24 | `style_VZOR1E`：24/24 Medium |
| 说明文字 | 948 × 18 多档 | `style_B00F95`：12/18 Regular |
| 小节标签"纯文字 / ICON+文字" | 36 × 12 / 62 × 12 | `style_1DGRY0`：12/12 Medium |
| 页头 | 1080 × 232px | `layout_MBUTW3` |

## 状态

Toast 的状态由其变体表示（ICON+文字 三种语义即三种"状态"）：

| 状态 | 含义 |
|---|---|
| 出现（fade-in） | 触发后 2s 计时开始 |
| 已完成 | 操作成功反馈 |
| 加载中 | 异步进行中（loading icon） |
| 加载失败 | 操作失败反馈 |
| 自动消失（fade-out） | 出现 2s 后自动消失 |

## 颜色与 token

| 用途 | hex | 说明 |
|---|---|---|
| 页面底色 | `#FFFFFF` = `White` | 规范画板底 |
| 示例容器灰底 | `#F7F8FA` = `C-Coolgray20` | 演示底色 |
| 章节标题文字 | `#11141A` | 24px Medium |
| 说明文字 | `#5C6373` | 12px Regular（与按钮页"状态标签灰"一致） |
| 小节标签文字 | `#17181A` | 12px Medium |
| 标尺暖色（演示用） | `#5C6373` 系 | 仅说明区，非 Toast 本体色 |
| AI 渐变页头 | `linear-gradient(-64deg, rgba(51,119,255,0)→rgba(51,119,255,0.06))` | 页头装饰渐变 |

> Toast 本体（胶囊容器）的具体填色未在本页 globalVars 中以独立 token 形式给出；实际产品中通常采用深色半透明（`#000000` 60–80% α）+ 白字方案，落地以最新组件库为准。
> 关联 token 详见 [色彩](../基础/色彩.md)。

## 间距与排布

- **居中展示**：原文明确"在页面居中展示"（移动端 + 桌面端均如此）
- **纯文字胶囊高度**：固定 40px
- **ICON+文字方卡**：102 × 102px（图标 + 文字垂直堆叠）
- **手机示例排布**：移动端 4 个 375×812 手机框架在画板中陈列（两行两列），分别演示已完成 / 加载中 / 加载失败 / 纯文字四种 Toast
- **特殊情况区**：移动端规范画板 y=2843 起，单独说明边缘场景，区域高度 851px

## 文案规则

> 简明扼要：文言提示尽量简短。
> 最大宽度视情况设计师自行判断，不建议文字过多。

- 文案应**简短直白**，单行优先
- 最大宽度由设计师按场景判断，**不建议文字过多**
- 避免在 Toast 中提供操作（"撤销" / "查看"等需要用户响应的操作不应放进 Toast，因为 Toast 会在 2s 内自动消失）

## 交互行为

> 不会影响用户操作，用户可以不与回应，通常有时间限制，出现 2s 就会自动消失。
> 在页面居中展示。

- **非阻断**：Toast 不打断用户当前操作，无蒙层
- **自动消失**：出现 2s 后自动 fade-out
- **位置**：在页面**居中**展示（桌面端与移动端均居中）
- **图标变体**：加载中显示 loading 转圈、已完成显示对勾、加载失败显示错误图标
- **不可点击 / 不需回应**：用户无需点确认；如果业务需要用户响应，应改用 [Banner](Banner.md) 或 [横幅提示](横幅提示.md)

## 示例

![桌面端 Toast-基础规则](../图片/组件/Toast/desktopbaserule.png)
![桌面端 Toast-纯文字示例](../图片/组件/Toast/desktopchun-wen-ziexample.png)
![移动端 Toast-基础规则](../图片/组件/Toast/mobilebaserule.png)
![移动端 Toast-已完成](../图片/组件/Toast/mobileICONwen-zi-yi-wan-cheng.png)
![移动端 Toast-加载中](../图片/组件/Toast/mobileICONwen-zi-loading.png)
![移动端 Toast-加载失败](../图片/组件/Toast/mobileICONwen-zi-loadingshi-bai.png)
![移动端 Toast-纯文字](../图片/组件/Toast/mobilechun-wen-zi.png)
![移动端 Toast-特殊情况](../图片/组件/Toast/mobilete-shu-qing-kuang.png)

## 设计考量 / 原文摘录

> 最大宽度视情况设计师自行判断，不建议文字过多。
> 在页面居中展示。
> 不会影响用户操作，用户可以不与回应，通常有时间限制，出现 2s 就会自动消失。
> 简明扼要：文言提示尽量简短。

- **2 秒法则**：固定显示时长保证不堆积，避免抢占用户注意
- **居中而非顶部 / 底部**：与移动端常见"顶部 banner / 底部 snackbar"思路不同，如流统一居中，让 Toast 与 ICON+文字方卡居中视觉一致
- **不建议文字过多**：Toast 是反馈而非通知，长文案违背"轻量"定位，应改用 Banner 或弹窗

## 不推荐用法

- 在 Toast 中放置可点击操作（撤销 / 查看等需要响应）
- Toast 中堆叠多行文字（破坏"轻量、简短"原则）
- 用 Toast 替代关键确认对话（应使用 [弹窗](弹窗.md)）
- 同时出现多个 Toast（应排队 / 合并）
- 自定义 Toast 显示时长 > 5s（违反"2s 自动消失"原文）

## 关联

- 不打断流程但需用户响应的提示见 [Banner](Banner.md)、[横幅提示](横幅提示.md)
- 阻断式确认对话见 [弹窗](弹窗.md)
- 异步操作的视觉反馈见 [加载](加载.md)
- 由触发元素旁定位的悬浮容器见 [浮层](浮层.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
