Kbd

Kbd stands for the HTML <kbd> element — short for "keyboard input" — and is the standard semantic tag for representing user keystrokes (W3C HTML spec). The <x-wirekit::kbd> component wraps that element into a small, raised "keycap" — a <kbd> tag with a monospace font, a subtle border, a tinted background, and a rounded corner. Use it whenever you describe a keyboard input the user is meant to press.

Two common patterns:

• Inline shortcut hints — sprinkle a single <x-wirekit::kbd> into running text to label a key (e.g. press <x-wirekit::kbd size="sm">Esc</x-wirekit::kbd> to close). The component sits inline with the surrounding font flow and adapts its size relative to the parent typography.
• Key combinations — wrap multiple <x-wirekit::kbd> in a <x-wirekit::row gap="xs"> to render shortcut sequences like <x-wirekit::kbd size="sm">⌘</x-wirekit::kbd> <x-wirekit::kbd size="sm">K</x-wirekit::kbd>. Each key gets its own <kbd> element so screen readers announce them as discrete inputs rather than concatenating them into a single token.

The component renders the semantic HTML5 <kbd> element — assistive technology announces it as "keyboard input" automatically, so authors don't need to add aria-label for the indicator role itself. For platform-specific glyphs (⌘ Cmd on macOS, Ctrl on Windows / Linux, ⇧ Shift, ⌥ Opt, ⌃ Ctrl-on-Mac, ↵ Enter), prefer the symbol on macOS / iOS surfaces and the spelled-out label everywhere else — or detect the platform and swap server-side.

Live Sandbox

This is a hydrated playground for the component. Toggle "Live preview" on the block below to swap the static HTML render for a real Livewire instance — every prop in the component's sandbox schema becomes an editable form field inside the iframe, so you can try different prop combinations live without writing any local code.

<x-wirekit::kbd>Cmd</x-wirekit::kbd>

Basic Usage

<x-wirekit::kbd>K</x-wirekit::kbd>

Key Combinations

<x-wirekit::row gap="xs" align="center">
    <x-wirekit::kbd>⌘</x-wirekit::kbd>
    <x-wirekit::kbd>K</x-wirekit::kbd>
</x-wirekit::row>

Sizes

<x-wirekit::row gap="md" align="center">
    <x-wirekit::kbd size="sm">Esc</x-wirekit::kbd>
    <x-wirekit::kbd size="md">Enter</x-wirekit::kbd>
    <x-wirekit::kbd size="lg">Space</x-wirekit::kbd>
</x-wirekit::row>

In Context

<x-wirekit::text>
    Press <x-wirekit::kbd size="sm">⌘</x-wirekit::kbd> <x-wirekit::kbd size="sm">K</x-wirekit::kbd> to open the command palette.
</x-wirekit::text>

Props

Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

Pitfalls

• Think twice before putting <x-wirekit::kbd> inside a <button>. Not for the font — the element sets --font-wk-mono on itself and keeps it wherever it lands. The reason is semantic: <kbd> marks up input the READER is being asked to type, and a button already says "activate me". Nesting the two makes the shortcut look like a second control. Render the hint beside the button rather than inside it.

Design Tokens