Preview Updated 2026-05-10

Kbd

Tiny typographic control for showing keyboard shortcuts; supports key combos, custom separators, and 3 sizes.

Basic usage

The keys array renders multiple individual <kbd> elements joined by separator (default +).

背景

命令面板：Ctrl+K

<script setup lang="ts">
import { CfKbd } from '@chufix-design/vue';
</script>

<template>
  <span>命令面板：<CfKbd :keys="['Ctrl', 'K']" /></span>
</template>

<CfKbd keys={['Ctrl', 'K']} />

Combos and custom separator

separator is configurable — for example use a space to express “press, then press the next key” (vim style).

背景

新建文件：⌘+N关闭标签：Ctrl+W三键组合：Ctrl+Shift+PVim 退出：Esc : q

<script setup lang="ts">
import { CfKbd } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; flex-direction: column; gap: 8px;">
    <span>新建文件：<CfKbd :keys="['⌘', 'N']" /></span>
    <span>关闭标签：<CfKbd :keys="['Ctrl', 'W']" /></span>
    <span>三键组合：<CfKbd :keys="['Ctrl', 'Shift', 'P']" /></span>
    <span>Vim 退出：<CfKbd :keys="['Esc', ':', 'q']" separator=" " /></span>
  </div>
</template>

<CfKbd keys={['⌘', 'N']} />
<CfKbd keys={['Ctrl', 'W']} />
<CfKbd keys={['Ctrl', 'Shift', 'P']} />
<CfKbd keys={['Esc', ':', 'q']} separator=" " />

Single key (slot usage)

Omit keys and put the key name in the default slot / children — fits the “single key” case.

背景

Caps LockTabEscEnterSpace

<script setup lang="ts">
import { CfKbd } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; gap: 16px; align-items: center; flex-wrap: wrap;">
    <CfKbd>Caps Lock</CfKbd>
    <CfKbd>Tab</CfKbd>
    <CfKbd>Esc</CfKbd>
    <CfKbd>Enter</CfKbd>
    <CfKbd>Space</CfKbd>
  </div>
</template>

<CfKbd>Caps Lock</CfKbd>
<CfKbd>Tab</CfKbd>
<CfKbd>Esc</CfKbd>
<CfKbd>Enter</CfKbd>
<CfKbd>Space</CfKbd>

Three sizes

size — sm for inline notes, md default, lg for landing-page emphasis.

背景

Ctrl+KCtrl+KCtrl+K

<script setup lang="ts">
import { CfKbd } from '@chufix-design/vue';
</script>

<template>
  <div style="display:flex; gap: 16px; align-items: center; flex-wrap: wrap;">
    <CfKbd :keys="['Ctrl', 'K']" size="sm" />
    <CfKbd :keys="['Ctrl', 'K']" size="md" />
    <CfKbd :keys="['Ctrl', 'K']" size="lg" />
  </div>
</template>

<CfKbd keys={['Ctrl', 'K']} size="sm" />
<CfKbd keys={['Ctrl', 'K']} size="md" />
<CfKbd keys={['Ctrl', 'K']} size="lg" />

API

Prop	Type	Default	Description
`keys`	`string[]`	`[]`	Combo array; each entry renders as one `<kbd>`
`separator`	`string`	`'+'`	Separator between multiple keys
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size