切换·Esc 返回

警告提示Alert

提示与状态反馈
在页面中持续显示提示或风险

警告提示直接放在相关内容附近,用来说明状态、风险或异常,不会像弹窗一样阻断操作。重要程度要通过标题、图标和文字共同表达,不能只靠颜色。

新功能上线 · 编辑器已支持深色模式×
发布成功 · 线上版本已生效×
体验环境 · 数据每日 0 点重置×
提交失败 · 2 处填写有误,请检查后重试×

什么时候用

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

什么时候不用

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