ICEN UI 设计系统
搜索组件… ⌘K

键盘键

按键帽（含 kbd--sm）与行内代码片 code-inline。

按 Ctrl + K 打开命令面板，输入 preset piano dark 切换预设，Esc 关闭。

<p style="margin:0">按 <kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">K</kbd> 打开命令面板，输入 <code class="code-inline">preset piano dark</code> 切换预设，<kbd class="kbd kbd--sm">Esc</kbd> 关闭。</p>

安装

bun add @icen.ai/ui

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

import '@icen.ai/ui/kit/kbd';

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

bunx --bun @icen.ai/ui add kbd

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

用法

<kbd class="kbd">Ctrl</kbd> + <kbd class="kbd kbd--sm">K</kbd><code class="code-inline">行内代码</code>