跳到主要内容
Termlib

UI 组件 · 反馈

轻提示

Toast

也叫：全局提示、Message、Snackbar、吐司提示

操作后在屏幕顶部或底部短暂出现的一行小提示，几秒后自动消失，不打断用户。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

点击「保存」成功后，在页面顶部居中显示一条轻提示「已保存」，左侧带对勾图标，3 秒后自动淡出；失败时显示红色叉号图标和「保存失败，请重试」。多条提示同时出现时依次向下堆叠，不遮挡主要操作按钮。

发给

01判断

你的内容是这样吗？

对照两列，确认轻提示是不是你要找的。

符合这些情况，用轻提示

  • 保存、复制、删除等操作完成后，只需要一句话告知结果
  • 结果不需要用户做任何决定，看一眼就能继续操作
  • 执行了可撤销的操作，想在提示里附带一个「撤销」入口

是这些情况，换成别的

  • 错误信息需要用户仔细阅读或照着处理，几秒就消失会来不及看

    改用表单校验

  • 提示需要一直留在页面上，比如账号未认证、配额即将用完

  • 消息带标题和多行正文，或需要用户点进去查看详情

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    表单校验错误只用轻提示报一句，用户不知道具体是哪个字段错了

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    同时连续弹出一堆轻提示，把页面顶部挡满

  3. 03

    把重要的失败信息做成轻提示，几秒后消失，用户根本没看到

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

一个小型浮动条，包含状态图标和一句提示文字，有时右侧带「撤销」之类的单个操作。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1屏幕顶部居中或底部的一个小胶囊或小条
  2. 2只有一个图标加一句短文字
  3. 3几秒后自动消失，没有遮罩

04解释

详细解释

轻提示用来告诉用户「刚才的操作有结果了」，比如「已保存」「复制成功」「网络异常，请重试」。它通常只有一个状态图标加一句话，出现在屏幕顶部居中或底部，2~3 秒后自动消失，不需要用户点任何东西。Ant Design 和 Element Plus 里叫 Message，MUI 里叫 Snackbar，sonner、react-hot-toast 这类库直接叫 Toast。

三个反馈组件的区别：轻提示是 临时的一句话，自动消失；警告提示 是嵌在页面里的固定横条，一直显示直到问题解决；通知提醒框 从右上角弹出，带标题和多行正文，适合更重要、需要用户留意的消息。

开发者信息
术语 ID
component-toast
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-message-notice
  • .el-message
  • [class*="MuiSnackbar-root"]
  • .arco-message
  • .t-message
  • .n-message
  • [data-sonner-toast]
  • .van-toast
  • .toast:not(:has(.toast-header))
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • toast
  • snackbar
  • toast-message
  • toaster
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Toast
  • Snackbar
  • Toaster
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 浮在内容上
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30