ICEN UI
ICEN UI 徽标
Docs ⌘K
Core · 稳定

徽标

角标徽标：数字计数或纯圆点，挂在外层元素的角上。

Preview
数据展示 badge
9 99+ 3
沈 头像 5
html
<div class="demo-row">  <span class="icen-badge-host">    <button class="icen-btn" type="button">消息</button>    <span class="icen-badge">9</span>  </span>  <span class="icen-badge-host">    <button class="icen-btn" type="button">通知</button>    <span class="icen-badge">99+</span>  </span>  <span class="icen-badge-host">    <button class="icen-btn icen-btn-primary" type="button">收件箱</button>    <span class="icen-badge icen-badge--accent">3</span>  </span>  <span class="icen-badge-host">    <button class="icen-btn" type="button">待办</button>    <span class="icen-badge icen-badge--dot icen-badge--error"></span>  </span></div><div class="demo-row" style="margin-top:14px">  <span class="icen-badge-host">    <span class="icen-avatar">沈</span>    <span class="icen-badge icen-badge--bottom icen-badge--dot icen-badge--success"></span>  </span>  <span class="icen-badge-host">    <span class="icen-avatar"><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect width='48' height='48' fill='%23d97757'/><circle cx='24' cy='18' r='8' fill='%23fffdf9'/><path d='M8 44c3-10 10-14 16-14s13 4 16 14z' fill='%23fffdf9'/></svg>" alt="头像" /></span>    <span class="icen-badge icen-badge--bottom icen-badge--dot icen-badge--warning"></span>  </span>  <span class="icen-badge-host">    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M10 3.5a4.5 4.5 0 0 1 4.5 4.5c0 4.5 1.8 5.7 2.5 6.5H3c.7-.8 2.5-2 2.5-6.5A4.5 4.5 0 0 1 10 3.5ZM8.5 16.5a1.6 1.6 0 0 0 3 0"></path></svg>    <span class="icen-badge icen-badge--sm icen-badge--error">5</span>  </span></div>

特性

与徽章（pill）分工：badge 是挂在元素角上的计数提醒，pill 是行内状态徽章。

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

html
<span class="icen-badge-host">  <button class="icen-btn">消息</button>  <span class="icen-badge">9</span></span><!-- 纯圆点：badge--dot；语义色：--success/--warning/--error/--accent/--info --><!-- 底部角（头像在线点）：badge--bottom；尺寸：badge--sm/lg -->