组件 · 反馈 · 18
轻提示
轻提示 = 贴边显示的临时消息,定时自动消失,任何时候都不阻断页面。
直达修改 Prompt →
轻提示是什么?
轻提示是短暂确认。给出边角、时长,以及成功与错误的颜色。
变体
点击属性即可在预览中高亮。
-
- 正向确认提示(已保存、已发送、已复制)。
-
- 无效状态:红色边框 + 提示文案,通常阻止提交。
-
- 提示条的圆角程度。
-
- 提示条自动消失前的停留时长(ms 或 s)。
-
- 仅含单个图标、无文字的按钮,必须配 aria-label。
状态
点击属性即可在预览中高亮。
-
- 输入或报错前字段的默认有效状态。
-
- 正向确认提示(已保存、已发送、已复制)。
-
- 无效状态:红色边框 + 提示文案,通常阻止提交。
结构解剖
这些是 Prompt 里应该点名的部件。
什么时候用
- 确认用户刚完成的操作:已复制、已保存、已发送
- 后台任务的结果
- 无需打断的错误提示
什么时候别用
- 需要用户做决定的消息——改用对话框
- 很长的错误解释——用行内错误文案
- 同时堆叠超过 3 条
Create a toast notification.
STYLE
- bottom-right, 12px radius, 4s auto dismiss
STATES
- success mint, error red
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui