For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/components/alert.md.
A3S UI
  • 简体中文
  • next

      • 警报

      警报用于在当前页面中传达需要注意的状态、结果或风险，不打断用户正在进行的任务。

      实时预览

      付款成功

      ¥199.00 已支付，电子收据已发送到你的邮箱。

      深色模式现已可用

      可以在外观设置中切换主题，选择会立即应用到整个工作区。

      用法

      引入 CSS

      导入 Tailwind 和一个完整的 A3S UI 样式包。

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      或者仅导入基本 CSS、警报组件 CSS 和一个样式包。

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/alert.css";
@import "@a3s-lab/ui/styles/a3s.css";

      使用 CDN 或包管理器集成时，请参见安装页。

      添加警报 HTML

      使用 alert 作为中性提示；通过 data-variant="info"、success、warning 或 destructive 表达信息、成功、警告和错误。只有动态插入的紧急错误才添加 role="alert"；可延后处理的状态使用 role="status"，静态说明不需要实时角色。直接添加 <footer> 子元素可提供一个与提示紧密相关的恢复操作。

      <div class="alert"><svg aria-hidden="true" class="lucide lucide-info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg>
  <h2>网关配置需要重新验证</h2>
  <section>证书已更新，请先验证连接再继续发布。</section>
  <footer>
    <button type="button" class="btn" data-variant="outline">立即验证</button>
  </footer>
</div>

      HTML 结构

      <div class="alert">

      主容器。使用 data-variant="info"、success 或 destructive 表达语义状态。

      <svg> 可选
      辅助识别状态的图标。必须设置 aria-hidden="true"，不能替代标题。
      <h2>
      简短结果或问题名称。根据页面层级选择合适的标题级别，也可使用 <strong data-title>。
      <section> 可选
      影响、原因和恢复方式。
      <footer> 可选
      行末操作区。只放与当前提示直接相关的按钮或链接，避免形成第二套工具栏。

      状态与变体

      基本

      中性提示用于说明当前上下文，不暗示成功或失败。

      实时预览

      维护窗口已安排

      网关将在今晚 23:00 重启，预计持续 5 分钟。

      破坏性

      使用 data-variant="destructive" 创建破坏性警报。

      实时预览

      发布失败

      目标集群拒绝了配置。请检查证书权限后重试。

      动作

      当存在明确恢复路径时，使用 <footer> 提供一个主操作。不要把与提示无关的命令放进警报。

      实时预览

      检测到新的访问范围

      当前密钥请求写入生产环境，需要重新确认权限。

      警告

      使用 data-variant="warning" 表达尚未失败、但继续操作前需要处理的风险。状态含义必须同时由标题和说明表达。

      实时预览

      生产证书将在 3 天后过期

      请在到期前完成轮换并验证调用方，避免连接中断。

      RTL

      将 dir="rtl" 添加到警报或祖先。

      实时预览

      تم الدفع بنجاح

      تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.

      ميزة جديدة متاحة

      لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.

      可访问性

      标题必须独立说明结果或风险，说明文本再补充影响与恢复路径；图标只用于快速识别状态，并设置 aria-hidden="true"。静态说明不添加实时角色；异步完成且不紧急的结果使用 role="status"，需要用户立即处理的动态错误才使用 role="alert"。不要在已有实时区域中嵌套警报，也不要因为颜色或图标不同而省略状态文字。宿主负责决定何时插入或更新警报、把焦点保持在原任务上，并让警报中的恢复操作回到可预测的焦点位置。