<div class="demo-row"> <button class="icen-btn">默认</button> <button class="icen-btn icen-btn-primary">主要</button> <button class="icen-btn icen-btn-danger">危险</button> <button class="icen-btn icen-btn-ghost">幽灵</button> <button class="icen-btn icen-btn-link">链接</button></div><div class="demo-row" style="margin-top:14px"> <button class="icen-btn icen-btn-sm">小号</button> <button class="icen-btn">默认</button> <button class="icen-btn icen-btn-lg">大号</button></div><div class="demo-row" style="margin-top:14px"> <button class="icen-btn icen-btn-primary"><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 icen-btn-icon-start" aria-hidden="true"><path d="M10 4v12M4 10h12"></path></svg>新建项目</button> <button class="icen-btn icen-btn-icon" 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="M3.5 5.5h13M3.5 10h13M3.5 14.5h13M7 4v3M12.5 8.5v3M8 13v3"></path></svg></button> <button class="icen-btn icen-btn-sm is-loading" aria-busy="true">加载中</button> <button class="icen-btn is-error">错误态</button> <button class="icen-btn icen-btn-block">通栏按钮</button></div>特性
- 变体：默认 /
icen-btn-primary/icen-btn-danger/icen-btn-ghost/icen-btn-link - 尺寸：
icen-btn-sm/ 默认 /icen-btn-lg，高度与内距同步缩放 - 图标：前置图标挂
icen-btn-icon-start；纯图标钮用icen-btn-icon，必须配aria-label - 状态：
is-loading旋钮（同步aria-busy="true"）、is-error错误态、原生disabled - 通栏：
icen-btn-block撑满父容器宽度
安装
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/btn';也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add btn
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/btn.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
<button class="icen-btn">默认</button><button class="icen-btn icen-btn-primary">主要</button><button class="icen-btn icen-btn-danger">危险</button><button class="icen-btn icen-btn-ghost">幽灵</button><button class="icen-btn icen-btn-link">链接</button><!-- 尺寸 --><button class="icen-btn icen-btn-sm">小号</button><button class="icen-btn icen-btn-lg">大号</button><!-- 图标 --><button class="icen-btn icen-btn-primary"> <svg class="icen-btn-icon-start">…</svg> <span class="btn-text">文本</span></button><button class="icen-btn icen-btn-icon" aria-label="设置"><svg>…</svg></button><!-- loading（加 .is-loading + aria-busy） --><button class="icen-btn is-loading" aria-busy="true">加载中</button>