9
99+
3
沈
5
5
<div class="demo-row"> <span class="badge-host"> <button class="btn" type="button">消息</button> <span class="badge">9</span> </span> <span class="badge-host"> <button class="btn" type="button">通知</button> <span class="badge">99+</span> </span> <span class="badge-host"> <button class="btn btn-primary" type="button">收件箱</button> <span class="badge badge--accent">3</span> </span> <span class="badge-host"> <button class="btn" type="button">待办</button> <span class="badge badge--dot badge--error"></span> </span></div><div class="demo-row" style="margin-top:14px"> <span class="badge-host"> <span class="avatar">沈</span> <span class="badge badge--bottom badge--dot badge--success"></span> </span> <span class="badge-host"> <span class="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="badge badge--bottom badge--dot badge--warning"></span> </span> <span class="badge-host"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--token-text-muted)"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg> <span class="badge badge--sm badge--error">5</span> </span></div>安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import '@icen.ai/ui/kit/badge';也可以用脚手架直接打印引入行：
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 项目无此问题。
用法
<span class="badge-host"> <button class="btn">消息</button> <span class="badge">9</span></span><!-- 纯圆点：badge--dot；语义色：--success/--warning/--error/--accent/--info --><!-- 底部角（头像在线点）：badge--bottom；尺寸：badge--sm/lg -->