ICEN UI
ICEN UI 空状态
Docs ⌘K
Core · 稳定

空状态

空状态：图标 + 标题 + 引导动作，五种场景预设。

Preview
数据展示 empty

暂无收藏

你还没有收藏任何作品，去逛逛找点喜欢的吧。

未找到匹配结果

尝试调整搜索关键词或清除筛选条件

加载失败

数据获取异常，请稍后重试

404

你访问的页面不存在或已被移除

html
<div class="demo-row" style="align-items:flex-start;gap:16px">  <div class="icen-empty icen-empty--illustrated" style="flex:1;min-width:200px">    <div class="icen-empty-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="M3.5 12.25h3.7l1.5 2.5h2.6l1.5-2.5h3.7M4.7 5.5l-1.2 6.75v3.25a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5v-3.25L15.3 5.5a1.3 1.3 0 0 0-1.25-1H5.95a1.3 1.3 0 0 0-1.25 1Z"></path></svg></div>    <p class="icen-empty-title">暂无收藏</p>    <p class="icen-empty-desc">你还没有收藏任何作品，去逛逛找点喜欢的吧。</p>    <div class="icen-empty-action"><button class="icen-btn icen-btn-primary icen-btn-sm">去发现</button></div>  </div>  <div class="icen-empty icen-empty--search" style="flex:1;min-width:200px">    <div class="icen-empty-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M13.3 13.3 17 17M14.5 8.5a6 6 0 1 1-12 0 6 6 0 0 1 12 0"></path></svg></div>    <p class="icen-empty-title">未找到匹配结果</p>    <p class="icen-empty-desc">尝试调整搜索关键词或清除筛选条件</p>    <div class="icen-empty-action"><button class="icen-btn icen-btn-sm">清除筛选</button></div>  </div></div><div class="demo-row" style="align-items:flex-start;gap:16px;margin-top:16px">  <div class="icen-empty icen-empty--error" style="flex:1;min-width:200px">    <div class="icen-empty-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 0ZM7.2 7.2l5.6 5.6M12.8 7.2l-5.6 5.6"></path></svg></div>    <p class="icen-empty-title">加载失败</p>    <p class="icen-empty-desc">数据获取异常，请稍后重试</p>    <div class="icen-empty-action"><button class="icen-btn icen-btn-sm icen-btn-primary">重试</button></div>  </div>  <div class="icen-empty icen-empty--404 icen-empty--illustrated" style="flex:1;min-width:200px">    <h3 class="icen-empty-title">404</h3>    <p class="icen-empty-desc">你访问的页面不存在或已被移除</p>    <div class="icen-empty-action"><button class="icen-btn icen-btn-sm">返回首页</button></div>  </div></div>

特性

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

html
<div class="icen-empty [.empty--sm|.empty--lg]     [.empty--error|.empty--404|.empty--search|.empty--maintenance|.empty--network]     [.empty--illustrated]">  <div class="icen-empty-icon">…svg…</div>  <p class="icen-empty-title">暂无数据</p>  <p class="icen-empty-desc">描述文字</p>  <div class="icen-empty-action"><button class="icen-btn icen-btn-primary icen-btn-sm">动作</button></div></div>