按钮

5 变体（默认 / primary / danger / ghost / link）+ 3 尺寸（sm / 默认 / lg）+ 图标钮 + loading spinner + 错误态 + block 通栏。

<div class="demo-row">  <button class="btn">默认</button>  <button class="btn btn-primary">主要</button>  <button class="btn btn-danger">危险</button>  <button class="btn btn-ghost">幽灵</button>  <button class="btn btn-link">链接</button></div><div class="demo-row" style="margin-top:14px">  <button class="btn btn-sm">小号</button>  <button class="btn">默认</button>  <button class="btn btn-lg">大号</button></div><div class="demo-row" style="margin-top:14px">  <button class="btn btn-primary"><svg class="btn-icon-start" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>新建项目</button>  <button class="btn btn-icon" aria-label="设置"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6m11-7h-6m-6 0H1"/></svg></button>  <button class="btn btn-sm is-loading" aria-busy="true">加载中</button>  <button class="btn is-error">错误态</button>  <button class="btn btn-block">通栏按钮</button></div>

安装

bun add @icen.ai/ui

pnpm add @icen.ai/ui

npm install @icen.ai/ui

yarn 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="btn">默认</button><button class="btn btn-primary">主要</button><button class="btn btn-danger">危险</button><button class="btn btn-ghost">幽灵</button><button class="btn btn-link">链接</button> <!-- 尺寸 --><button class="btn btn-sm">小号</button><button class="btn btn-lg">大号</button> <!-- 图标 --><button class="btn btn-primary">  <svg class="btn-icon-start">…</svg>  <span class="btn-text">文本</span></button><button class="btn btn-icon" aria-label="设置"><svg>…</svg></button> <!-- loading（加 .is-loading + aria-busy） --><button class="btn is-loading" aria-busy="true">加载中</button>