警告提示Alert

你可能会说

页面上方要一直挂着一条黄色提示,告诉用户账号快到期了。

警告提示是嵌在页面内容中、持续说明状态、风险或异常的提示组件账号即将到期可在设置页相关位置显示警告提示。它不阻断当前操作,但重要程度不能只靠颜色,需同时使用标题、图标和文字。
新功能上线 · 编辑器已支持深色模式×
发布成功 · 线上版本已生效×
体验环境 · 数据每日 0 点重置×
提交失败 · 2 处填写有误,请检查后重试×

什么时候用

  • 表单提交失败:把错误汇总钉在表单上方
    ⚠ 2 处填写有误,请检查后重试邮箱密码
  • 系统维护 / 升级公告:全局生效,人人都得看到
    📢 本周六 02:00-04:00 系统维护,期间暂不可用
  • 危险操作区域:提前说清后果,而不是事后报错
    ⚠ 删除后不可恢复,操作前请确认已备份
    删除项目
  • 页面状态提醒:草稿未发布、体验版、权限受限
    ⓘ 当前是未发布草稿,仅自己可见

什么时候不用

  • 只是“保存成功”等瞬时反馈:使用 轻提示 Toast
    ✓ 保存成功一句话的成功,用不着一直挂着
  • 需要用户做出选择:使用 弹窗 Modal气泡确认框 Popconfirm
    ⚠ 删除需要明确确认
    删除
  • 持续提示过多:重要程度与阅读顺序会变得模糊
    ⚠ 密码即将过期⚠ 有 3 条未读公告ⓘ 新功能已上线
  • 将营销广告伪装成警告:会削弱用户对提示的信任
    🎉 限时 5 折!马上升级会员
组成结构 · Anatomy
当前为体验环境 · 数据每日 0 点重置,请勿存放重要内容×
整条横幅,类型决定底色和边框
辅助区分提示、警告和错误类型
标题加说明,讲清发生了什么、怎么办
可选,只有允许关掉的提示才放
常见变体 · Variants
提示Info
新功能上线 · 支持深色模式
有事要温和告知,不紧急也不是坏消息
成功Success
发布成功 · 线上已生效
好结果需要一直可见,而不是弹一下就完
警告Warning
体验环境 · 数据每日重置
有风险但还没出错,提前给用户提个醒
错误Error
提交失败 · 请检查后重试
已经出错,需要清楚展示原因和处理方法
典型使用场景
表单错误汇总
提交失败 · 2 处填写有误,请检查后重试
系统维护公告
📢系统维护 · 本周六 02:00-04:00 暂停服务,请提前保存工作×
危险操作前置警告
危险区域
删除项目 · 删除后无法恢复,请确认已备份数据
草稿未发布提醒
未发布草稿 · 当前内容仅自己可见,发布后对外公开×
夏季活动方案(草稿)
延伸阅读 · 权威出处