Kbd

A square, centered keyboard "key" chip for rendering shortcut hints — K, ⌘, ⌃, Enter. Renders a native <kbd> element so screen readers announce it as keyboard input. Sized so letters and modifier symbols share a consistent visual height, width, and baseline.

When to use

• Documenting keyboard shortcuts in copy or tooltips.
• Inside menu items and command palettes alongside the action label.
• Inline with prose: "Press K to open search."

When not to use

• For arbitrary monospace text — use Code.
• For chord-style multi-key shortcuts as a single chip — render multiple <Kbd> elements separated by + text instead.

1import { Kbd } from "@ngrok/mantle/kbd";2 3<div className="flex items-center gap-2">⋯4	<Kbd>K</Kbd>5	<Kbd>⌘</Kbd>6	<Kbd>⌃</Kbd>7	<Kbd>⇧</Kbd>8	<Kbd>⌥</Kbd>9</div>;

Keyboard Shortcuts

Combine multiple Kbd components to display keyboard shortcuts.

1import { Kbd } from "@ngrok/mantle/kbd";2 3<div className="flex items-center gap-2">⋯4	<Kbd>⌘</Kbd>5	<span>+</span>6	<Kbd>K</Kbd>7</div>;

Accessibility

Symbol-only glyphs (⌘, ⌃, ↵) are not announced meaningfully by screen readers. Provide an accessible name via aria-label on the <Kbd> or include a visually-hidden label inside, and mark the visible glyph aria-hidden.

1import { Kbd } from "@ngrok/mantle/kbd";2 3<div className="flex items-center gap-2">⋯4	<Kbd aria-label="Command">⌘</Kbd>5	<span>+</span>6	<Kbd>K</Kbd>7</div>;

API Reference

Kbd

The Kbd accepts the following props in addition to the standard HTML kbd attributes.