警告提示
Alert
别名:警告条提示横幅警告框通知横幅错误提示条页面顶部提示表单提交后的错误提示
这是什么
嵌在页面流内、带状态色底色的横条，用于必须被看见的消息：错误、警告、重要通知。 它占据文档流而不是覆盖内容，通常常驻直到问题被处理或用户手动关闭。
名词辨析
Alert 是页内持续显示的状态消息；Toast 是短暂浮层反馈；Modal 是必须处理的打断浮层。
交互实验室
试一试，再决定怎么用观察信息、成功、警告与错误提示的层级，尝试关闭可关闭的提示。
正在加载实验室…
使用时关注什么
- 01关键信息同时用文字表达，不只依赖颜色。
- 02阻断任务的错误应说明恢复路径。
✓ 适用场景
- 表单提交后的整体错误汇总
- 系统级通知（维护、额度将满）
- 破坏性操作前的页面内警告
✕ 不适用场景
- 轻量的成功反馈（改用 toast）
- 只与单个字段相关（改用字段内联错误）
- 多处滥用会稀释注意力，保持克制
常见形式
信息
Info
中性色，一般通知
成功
Success
确认操作已完成
警告
Warning
有风险但可以继续
错误
Error
失败或危险，需要处理
实现要点
background-colorborderborder-radiusflex状态色映射：info/success/warning/error 各配低饱和底色、同色系图标与左侧强调边。 结构：图标 + 标题 + 描述 + 可选操作与关闭。放在出错内容上方或附近，而不是一律堆在页面顶部。 颜色之外必须配图标与文字，避免只靠颜色传达状态。
平台 API
role="alert"aria-live="assertive"代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
横向对比
查看完整对比 →相关概念
轻提示Toast
在视口角落短暂出现、自动消失的小消息条，用来告知操作结果（已保存、已复制、上传完成）。 不打断当前流程，通常附一个操作入口（撤销、查看），停留约 3~5 秒后淡出。
组件替代方案表单校验Form Validation
在用户填写表单的过程中或提交时检查输入合法性，并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改"，而不是提交后被一整个错误页打回。
交互模式替代方案模态框Modal
覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件相似概念