<div class="toolbar" style="margin-bottom:14px"> <div class="toolbar-group"> <button class="btn btn-sm" aria-label="加粗"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h8a4 4 0 0 1 0 8H6z"/><path d="M6 12h9a4 4 0 0 1 0 8H6z"/></svg></button> <button class="btn btn-sm" aria-label="斜体"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg></button> <button class="btn btn-sm" aria-label="下划线"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg></button> </div> <span class="toolbar-separator"></span> <div class="toolbar-group"> <button class="btn btn-sm" aria-label="左对齐"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="15" y1="12" y2="12"/><line x1="3" x2="18" y1="18" y2="18"/></svg></button> <button class="btn btn-sm" aria-label="居中"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" x2="21" y1="6" y2="6"/><line x1="6" x2="18" y1="12" y2="12"/><line x1="4" x2="20" y1="18" y2="18"/></svg></button> </div> <span class="toolbar-spacer"></span> <span class="toolbar-label accent">3 项已选</span> <button class="btn btn-sm btn-danger">删除</button></div> <div class="toolbar toolbar--elevated" style="margin-bottom:14px"> <button class="btn btn-sm btn-primary">新建</button> <button class="btn btn-sm">导入</button> <button class="btn btn-sm">导出</button> <span class="toolbar-separator"></span> <input class="form-input" placeholder="搜索…" style="width:160px;height:28px;font-size:12px" /></div> <div class="toolbar toolbar--sm toolbar--wrap"> <span class="toolbar-label">小号紧凑</span> <button class="btn btn-sm">刷新</button> <button class="btn btn-sm">设置</button> <span class="toolbar-separator"></span> <button class="btn btn-sm">查看日志</button> <button class="btn btn-sm">监控</button></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/toolbar';也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add toolbar
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/toolbar.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
<div class="toolbar [--sm|--lg|--wrap|--elevated|--borderless]"> <div class="toolbar-group"> <button class="btn btn-sm">…</button> <button class="btn btn-sm">…</button> </div> <span class="toolbar-separator"></span> <span class="toolbar-spacer"></span> <span class="toolbar-label">右侧文字</span></div><!-- 分组 toolbar-group / 分隔符 toolbar-separator / 弹性占位 toolbar-spacer -->