Kbd 键盘按键

语义化的 <kbd> 封装组件，通过新粗野主义样式将快捷键从普通文本中视觉剥离，让文档和命令提示一目了然。

预览

Preview

常用快捷键

⌘+K打开命令面板

Ctrl+S保存

Shift+Tab反向缩进

尺寸

EscEnterSpace

变体

EscEnterTabSpaceFn

安装

pnpm dlx brutx-vue@latest add kbd

用法

<script setup>
import { Kbd } from 'brutx-ui-vue'
</script>

<template>
    <!-- 单键 -->
    <Kbd>Enter</Kbd>

    <!-- 组合键 -->
    <div class="flex items-center gap-1">
        <Kbd>⌘</Kbd>
        <span>+</span>
        <Kbd>K</Kbd>
    </div>

    <!-- 尺寸 -->
    <Kbd size="sm">Esc</Kbd>
    <Kbd size="md">Tab</Kbd>
    <Kbd size="lg">Space</Kbd>
</template>

变体

变体	说明
default	中性背景，标准前景色文字
primary	Primary（珊瑚色）背景，高对比前景色
secondary	Secondary（薄荷青）背景
accent	Accent（黄色）背景
backlit	黑色背景与 accent 色文字，呈现背光键帽效果

<script setup>
import { Kbd } from 'brutx-ui-vue'
</script>

<template>
    <div class="flex items-center gap-2">
        <Kbd variant="default">Esc</Kbd>
        <Kbd variant="primary">Enter</Kbd>
        <Kbd variant="secondary">Tab</Kbd>
        <Kbd variant="accent">Space</Kbd>
        <Kbd variant="backlit">Fn</Kbd>
    </div>
</template>

尺寸

尺寸	说明
sm	小尺寸，适合内联紧凑场景
md	默认尺寸
lg	大尺寸，适合独立展示

API 参考

Kbd — 属性

名称	类型	默认值	说明
variant	"accent" | "backlit" | "default" | "primary" | "secondary" | undefined	"default"	控制键帽的配色；backlit 使用黑色背景和 accent 色文字，呈现背光键帽效果。
详情 声明类型 NonNullable<"default" | "primary" | "secondary" | "accent" | "backlit" | null | undefined> | undefined 字面量 "accent" "backlit" "default" "primary" "secondary" 默认值详情 声明 'default' 来源: packages/ui/src/components/kbd/Kbd.vue 解析值 "default" 来源 Kbd.vue:10 packages/ui/src/components/kbd/Kbd.vue
size	"lg" | "md" | "sm" | undefined	"md"	控制键帽的内边距、字号与最小宽度。
详情 声明类型 NonNullable<"lg" | "sm" | "md" | null | undefined> | undefined 字面量 "lg" "md" "sm" 默认值详情 声明 'md' 来源: packages/ui/src/components/kbd/Kbd.vue 解析值 "md" 来源 Kbd.vue:11 packages/ui/src/components/kbd/Kbd.vue
class	string | undefined	undefined	合并到原生 kbd 根元素上的补充 CSS 类名。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/kbd/Kbd.vue 解析值 undefined 来源 Kbd.vue:12 packages/ui/src/components/kbd/Kbd.vue

Kbd — 插槽

名称	签名或类型	说明
#default	{}	键帽内展示的按键名称、符号或图标；组件本身只负责展示快捷键提示。
详情 声明类型 {} 来源 Kbd.vue packages/ui/src/components/kbd/Kbd.vue

可访问性

• 语义化标记：使用原生 <kbd> 元素渲染，屏幕阅读器可正确识别为键盘按键
• 视觉呈现：通过粗野主义样式将按键从普通文本中视觉剥离，提升可读性
• 组合键展示：支持通过多个 <Kbd> 组合展示快捷键，语义清晰