轻提示 Toast

Toast

屏幕边上飘一下就消失的小条:「已保存」「复制成功」——不打断你手上的事。

全平台通用状态与反馈悬浮元素组件

大白话说明

Toast 是最低打扰级别的反馈:出现在屏幕边缘,2–4 秒自动消失,不需要用户点确认。适合成功确认和可撤销操作的回执(删除后给 5 秒撤销),不适合需要用户做决定的事。

什么时候用

操作成功、状态变更、后台任务完成的即时回执。

什么时候不用

报错需要用户处理、或信息必须被读完时别用 Toast(一飘就没,用户还没看清就消失了)——那是横幅和弹窗的活。

细节与变体

  • 文案说结果不说过程:「已保存」而不是「保存成功啦!」再加个感叹号阵列
  • 同类 Toast 连续触发要合并或替换,别叠罗汉挡住内容
  • 带操作的 Toast(撤销)停留时间要给足 4 秒以上

配套效果见下方「可用效果」。

配套提示词(点开填空、复制)

可用效果

参考实现(开源)

  • shadcn/ui 组件库 ↗ MIT · 免费(MIT)

    不是装进项目的库,而是把组件源码复制进你自己的仓库——改起来毫无阻力,AI 也最熟它。

  • Mantine ↗ MIT · 免费(MIT)

    React 组件与 hooks 大礼包:100+ 组件,连日期选择这种难啃的都有。

相关条目