跳到正文
UIGrammer
EN 中文

组件 · 反馈 · 18

轻提示

轻提示 = 贴边显示的临时消息,定时自动消失,任何时候都不阻断页面。

直达修改 Prompt

轻提示是什么?

轻提示是短暂确认。给出边角、时长,以及成功与错误的颜色。

变体

点击属性即可在预览中高亮。

正向确认提示(已保存、已发送、已复制)。
无效状态:红色边框 + 提示文案,通常阻止提交。
提示条的圆角程度。
提示条自动消失前的停留时长(ms 或 s)。
仅含单个图标、无文字的按钮,必须配 aria-label。

状态

点击属性即可在预览中高亮。

输入或报错前字段的默认有效状态。
正向确认提示(已保存、已发送、已复制)。
无效状态:红色边框 + 提示文案,通常阻止提交。

结构解剖

这些是 Prompt 里应该点名的部件。

  • 01 图标
  • 02 消息
  • 03 容器

什么时候用

  • 确认用户刚完成的操作:已复制、已保存、已发送
  • 后台任务的结果
  • 无需打断的错误提示

什么时候别用

  • 需要用户做决定的消息——改用对话框
  • 很长的错误解释——用行内错误文案
  • 同时堆叠超过 3 条
Create a toast notification. STYLE - bottom-right, 12px radius, 4s auto dismiss STATES - success mint, error red TECHNICAL - React - Tailwind CSS - shadcn/ui