跳到主要内容
Termlib

UI 组件 · 反馈

警告提示

Alert

也叫：提示条、提醒条、状态提示、Callout

固定显示在页面或区块内的带色提示横条，用来说明当前状态、风险或需要注意的事项。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

在表单顶部放一个黄色警告提示条，左侧是感叹号图标，文字写「你的邮箱尚未验证，部分功能无法使用」，右侧带「立即验证」链接和关闭按钮；关闭后本次访问不再显示，提示条和表单同宽，不要做成浮动弹窗。

发给

01判断

你的内容是这样吗？

对照两列，确认警告提示是不是你要找的。

符合这些情况，用警告提示

  • 需要持续提醒一个尚未解决的状态，比如账号未验证、服务维护中
  • 表单提交失败，需要在表单上方汇总说明原因
  • 文档或设置页里，需要把一段注意事项和正文区分开

是这些情况，换成别的

  • 只是反馈刚完成的操作结果，比如「复制成功」

  • 新到达的消息需要吸引注意，而用户可能正在页面别处操作

  • 同一页面要显示很多条提示，堆在一起会让人全部忽略

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    页面顶部叠了三四个警告提示条，把正文挤到首屏以下

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    所有提示都用红色错误样式，用户分不清轻重

  3. 03

    把警告提示做成悬浮在内容上方的浮层，遮住了下面的表单

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

一个带底色和边框的横条，由状态图标、标题或说明文字、可选的操作链接和关闭按钮组成。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1与内容同宽的浅色底横条，带细边框或左侧色块
  2. 2左侧有对勾、感叹号或叉号等状态图标
  3. 3位置固定在页面流里，不会自动消失

04解释

详细解释

警告提示是页面里一块带底色的横条，左侧有图标，右侧是一两句说明，有时带「去处理」链接或关闭按钮。它按严重程度分成成功、信息、警告、错误四种，用不同颜色和图标区分。它是页面内容的一部分，不会自动消失，通常放在页面顶部、表单上方或某个区块开头。文档站里常见的「提示」「注意」框（Callout）也属于这一类。

和 轻提示 的区别：轻提示浮在页面上、几秒后消失，用来反馈刚刚的操作；警告提示是静态的，说明一个持续存在的状态，比如「试用期还剩 3 天」「当前网络离线」。和 通知提醒框 的区别：通知从角落弹出，是新到达的消息；警告提示不会弹出，它就长在页面里。

开发者信息
术语 ID
component-alert
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • [role="alert"]
  • .ant-alert
  • .el-alert
  • [class*="MuiAlert-root"]
  • .arco-alert
  • .t-alert
  • .n-alert
  • [data-slot="alert"]
  • .alert
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • alert
  • callout
  • notice
  • admonition
  • info-box
  • warning-box
  • tip-box
  • hint-box
  • alert-box
  • message-box
  • alert-message
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Alert
  • Callout
  • Admonition
  • Notice
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30