Kbd

A compact keyboard hint for row shortcuts, command prompts, and input affordances.

GitHub

Preview#

⌫⌘KEsc

Anatomy#

import { Kbd, KbdGroup } from "raft-ui";

<Kbd />

<KbdGroup>
  <Kbd />
</KbdGroup>

Usage#

Keep Kbd as supporting metadata, not the primary action label. In menus it sits at the trailing edge; in fields it names a shortcut without becoming a clickable control.

Input hint#

Cmd K

Key sequence#

Open command menu⌘K

API#WIP

Kbd#

PropTypeDefaultDescription
...propsComponentPropsWithRef<'kbd'>—Native kbd attributes (className for positioning or rare visual overrides). The root always renders a semantic kbd element.

KbdGroup#

PropTypeDefaultDescription
...propsComponentPropsWithRef<'span'>—Native span attributes (className for spacing or rare layout overrides) for a shortcut sequence. Add aria-label when the visual keys are symbolic.