Kbd

import type { ReactElement } from 'react'
import { Kbd } from '@gedatou/cadenza-ui'

一枚按键芯片：bg-muted 底、固定高度、无衬线小字，指针事件关闭，只负责被看。 底下是真 <kbd> 元素，不是 Base UI 部件 —— 没有任何 state，className 只收字符串， 其余原生 kbd 属性（含 ref）原样透传。

它是快捷键提示的那颗零件：Button 标签旁、 Tooltip 弹层里、InputGroup 的 addon 中，放进去就对齐，不用再手写 <kbd> 样式。

使用#

复制import { Kbd, KbdGroup } from '@gedatou/cadenza-ui'

复制<Kbd>Ctrl</Kbd>

组成#

单键直接用 Kbd；一组按键（一个和弦）用 KbdGroup 包起来：

复制Kbd
KbdGroup
├── Kbd
└── Kbd

分组#

KbdGroup 把同一个快捷键的几枚按键排成一行，间距固定：

import type { ReactElement } from 'react'
import { Kbd, KbdGroup } from '@gedatou/cadenza-ui'

KbdGroup 本身也渲染成 <kbd>（不是 div），整个和弦在语义上就是一次键盘输入。 它只管排布（inline-flex + gap-1），不画边框、不加背景。

Button#

把 Kbd 放进 Button，按键跟在标签后面一起排：

import type { ReactElement } from 'react'
import { Button, Kbd } from '@gedatou/cadenza-ui'

按键上 pointer-events-none，点击落在按钮上，芯片不会截走事件。

Tooltip#

放进 Tooltip 的弹层，按键自己反色，不用传任何 prop：

import type { ReactElement } from 'react'
import { Button, Kbd, KbdGroup, Tooltip, TooltipPopup, TooltipTrigger } from '@gedatou/cadenza-ui'

反色的钩子是弹层的 data-slot="tooltip-content"：Kbd 的样式带 in-data-[slot=tooltip-content]: 变体，在暗底弹层里换成半透明的 bg-background/20 和 text-background。所以 TooltipPopup 的 slot 名保留了 shadcn 写的 tooltip-content（部件改名叫 Popup，slot 不改），这条契约就是为它留的。

InputGroup#

放进 InputGroup 的 addon，做搜索框角落的快捷键提示：

import type { ReactElement } from 'react'
import { InputGroup, InputGroupAddon, InputGroupInput, Kbd } from '@gedatou/cadenza-ui'
import { IconSearch } from '@tabler/icons-react'

InputGroupAddon 负责对齐和收掉多余外边距，Kbd 负责芯片本身；两边各管一半， 不用像以前那样在 addon 里手写一整串 <kbd> 类名。

状态与 className#

纯 DOM 家族，底下没有 Base UI state，也没有任何手动挂的状态属性。

data-slot：Kbd 是 kbd，KbdGroup 是 kbd-group，需要从外部按容器统一定位时当选择器用。

className 两个部件都只收字符串 —— 落点是普通 <kbd>，不是 Base UI 槽位， 没有 (state) => string 的形态可言。图标放进 Kbd 时不带 size-* 的 svg 会被收成 size-3。

Props#

顺序规则：必填 → 非受控默认值 → 受控值 → 回调 → 行为开关 → 外观 → className。

Kbd#

一枚按键。

复制<Kbd>Ctrl</Kbd>

KbdGroup#

一组按键的容器，渲染成 <kbd>。

复制<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>

2 个类型一并导出：KbdProps / KbdGroupProps。