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>⋯6		<span className="sr-only">Command</span>7		<span aria-hidden>⌘</span>8	</Kbd>9	<Kbd>⋯10		<span className="sr-only">Control</span>11		<span aria-hidden>⌃</span>12	</Kbd>13	<Kbd>⋯14		<span className="sr-only">Shift</span>15		<span aria-hidden>⇧</span>16	</Kbd>17	<Kbd>⋯18		<span className="sr-only">Option</span>19		<span aria-hidden>⌥</span>20	</Kbd>21</div>;

Keyboard shortcuts

Combine multiple Kbd components to display keyboard shortcuts.

1import { Kbd } from "@ngrok/mantle/kbd";2 3<div className="flex flex-col gap-4">⋯4	<div className="flex items-center gap-2">⋯5		<Kbd>⋯6			<span className="sr-only">Command</span>7			<span aria-hidden>⌘</span>8		</Kbd>9		<span>+</span>10		<Kbd>K</Kbd>11	</div>12	<div className="flex items-center gap-2">⋯13		<Kbd>⋯14			<span className="sr-only">Control</span>15			<span aria-hidden>⌃</span>16		</Kbd>17		<span>+</span>18		<Kbd>⋯19			<span className="sr-only">Shift</span>20			<span aria-hidden>⇧</span>21		</Kbd>22		<span>+</span>23		<Kbd>P</Kbd>24	</div>25</div>;

Accessibility

Screen readers do not announce symbol-only glyphs (⌘, ⌃, ↵) meaningfully. Put a visually hidden label inside the <Kbd> and mark the visible glyph aria-hidden. Do not set aria-label on the <Kbd>: <kbd> has the generic role, which prohibits naming, so a screen reader does not read the label reliably.

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

Translation

The <kbd> element always carries translate="no", so a browser translation engine skips the subtree. A translated shortcut names a key the reader's keyboard does not have.

Kbd omits the translate prop from its type, so no call site can turn the guard off. A key is never translatable, unlike Code, which also styles terms that are not code and therefore takes the override. See that page for the second reason the attribute matters: a translation engine that rewrites the text nodes React holds can also break the render, and Browser translation for the mechanism in full.

API Reference

Kbd

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