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

<CfKbd :keys="['Ctrl', 'K']" />

<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

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

<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

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

<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

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

<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