COMPONENT 39 · Feedback & Status
警告提示
Alert
也叫Banner AlertCallout提示条NSAlert
在页面内突出需要注意的重要信息或状态。
Prominently communicates important information or status within a page.
ANATOMY & USAGE
结构与使用建议
组成部分
- 状态图标
- 标题与说明
- 可选操作
适合使用
- 信息重要且需要持续可见或要求用户处理时。
不建议使用
- 短暂成功反馈不需要打断阅读时。
键盘与无障碍
- 紧急动态信息可用 role=alert；静态内容避免重复播报，图标之外提供文字。
DESCRIBE IT TO AI
这样告诉编程助手
实现警告提示（Alert）：在页面内突出需要注意的重要信息或状态。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<div class="demo" role="alert">
<strong>警告提示</strong>
<p>在页面内突出需要注意的重要信息或状态。</p>
<button type="button">知道了</button>
</div>