ICEN UI
ICEN UI 警示
Docs ⌘K
Core · 稳定

警示

页面内嵌的警示条：info / success / warning / error 四态，可关闭。

Preview
反馈 alert

版本更新

v0.2.0 已发布：新增数据展示族组件。

构建成功

dist 产物已生成，耗时 42 秒。

配额将尽

本月构建时长已用 80%，超出后将排队执行。

发布失败

资源校验未通过：封面图尺寸不足 640×960。
html
<div class="demo-col-wide">  <div class="icen-alert icen-alert--info">    <span class="icen-alert-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM10 9v5M10 6.1v.15"></path></svg></span>    <div class="icen-alert-content">      <p class="icen-alert-title">版本更新</p>      <div class="icen-alert-body">v0.2.0 已发布：新增数据展示族组件。</div>    </div>    <button class="icen-alert-close" type="button" aria-label="关闭"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M6 6l8 8M14 6l-8 8"></path></svg></button>  </div>  <div class="icen-alert icen-alert--success">    <span class="icen-alert-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM6 10l2.7 2.7 5.3-5.4"></path></svg></span>    <div class="icen-alert-content">      <p class="icen-alert-title">构建成功</p>      <div class="icen-alert-body">dist 产物已生成，耗时 42 秒。</div>    </div>    <button class="icen-alert-close" type="button" aria-label="关闭"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M6 6l8 8M14 6l-8 8"></path></svg></button>  </div>  <div class="icen-alert icen-alert--warning">    <span class="icen-alert-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M8.7 3.5a1.5 1.5 0 0 1 2.6 0l6.4 11.3a1.5 1.5 0 0 1-1.3 2.2H3.6a1.5 1.5 0 0 1-1.3-2.2ZM10 7.2v4.4M10 14v.15"></path></svg></span>    <div class="icen-alert-content">      <p class="icen-alert-title">配额将尽</p>      <div class="icen-alert-body">本月构建时长已用 80%，超出后将排队执行。</div>    </div>    <button class="icen-alert-close" type="button" aria-label="关闭"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M6 6l8 8M14 6l-8 8"></path></svg></button>  </div>  <div class="icen-alert icen-alert--error">    <span class="icen-alert-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M8.7 3.5a1.5 1.5 0 0 1 2.6 0l6.4 11.3a1.5 1.5 0 0 1-1.3 2.2H3.6a1.5 1.5 0 0 1-1.3-2.2ZM10 7.2v4.4M10 14v.15"></path></svg></span>    <div class="icen-alert-content">      <p class="icen-alert-title">发布失败</p>      <div class="icen-alert-body">资源校验未通过：封面图尺寸不足 640×960。</div>    </div>    <button class="icen-alert-close" type="button" aria-label="关闭"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M6 6l8 8M14 6l-8 8"></path></svg></button>  </div></div>

特性

与 toast / 通知中心正交：alert 内嵌在页面流里，不自动消散。

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

js
import '@icen.ai/ui/kit/alert';

也可以用脚手架直接打印引入行：

bash
bunx --bun @icen.ai/ui add alert

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/feedback.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

html
<div class="icen-alert icen-alert--success">  <span class="icen-alert-icon">…svg…</span>  <div class="icen-alert-content">    <p class="icen-alert-title">标题</p>    <div class="icen-alert-body">正文</div>  </div>  <button class="icen-alert-close" type="button" aria-label="关闭"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M6 6l8 8M14 6l-8 8"></path></svg></button></div>