切换·Esc 返回

轻提示Toast

提示与状态反馈
短暂反馈刚刚完成的轻量操作

轻提示适合告诉用户已经保存、复制或完成某个小操作,通常几秒后自动消失。需要用户处理、查看详情或记住的重要错误,不能只用轻提示说明。

保存成功
保存
上面是画出来的,点这个玩真的

什么时候用

  • 保存 / 提交成功:一句「保存成功」就够
    保存成功
  • 复制链接 / 验证码:确认「已复制到剪贴板」
    https://vibe-ui.dev/x/8fk2复制
    复制成功
  • 轻量失败提示:网络抖动,重试就好
    网络异常,请重试
  • 不想打断当前操作:自动消失,不用用户动手
    已复制到剪贴板
    3 秒后自动消失

什么时候不用

  • 必须用户处理的错误 → 用 弹窗 Modal
    支付失败
    取消重新支付
  • 内容多、带跳转 → 用 通知 Notification
    审核未通过 查看原因 →
  • 连珠炮式连弹好几条 → 后面的全被忽略
    保存成功已同步网络异常
  • 成功失败一个样 → 用户猜不出结果
    操作完成
    这是成功了还是失败了?
组成结构 · Anatomy
保存成功
1提示条本体Toast顶部居中弹出的小条,自动出现自动消失
2状态点Icon绿成功 / 红失败,一眼分辨结果
3文案Message一句话说清结果,别超过一行
常见变体 · Variants
成功Success
保存成功
操作成了,轻报一声不用用户处理
失败Error
网络异常,请重试
小问题失败,用户知道重试就好
普通Info
已复制到剪贴板
不好不坏的确认,如已复制、已加入
典型使用场景
保存成功反馈
保存成功
复制链接确认
链接已复制到剪贴板
任何获得链接的人都可以查看此文件
网络异常轻提示
网络异常,请稍后重试
批量操作结果
已移动 3 个文件
☑ 📄 首页改版.fig ☑ 📄 设计规范.md ☐ 📄 发布清单.md