A square, centered keyboard "key" chip for rendering keyboard shortcut hints. Designed so every key—letters and modifiers—shares the same visual height/width and baseline.
import { Kbd } from "@ngrok/mantle/kbd";
<div className="flex items-center gap-2">
<Kbd>K</Kbd>
<Kbd>⌘</Kbd>
<Kbd>⌃</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌥</Kbd>
</div>;Combine multiple Kbd components to display keyboard shortcuts.
import { Kbd } from "@ngrok/mantle/kbd";
<div className="flex items-center gap-2">
<Kbd>⌘</Kbd>
<span>+</span>
<Kbd>K</Kbd>
</div>;When displaying modifier symbols (⌘/⌃/⇧/⌥), provide an accessible name via aria-label for screen reader users.
import { Kbd } from "@ngrok/mantle/kbd";
<div className="flex items-center gap-2">
<Kbd aria-label="Command">⌘</Kbd>
<span>+</span>
<Kbd>K</Kbd>
</div>;The Kbd accepts the following props in addition to the standard HTML kbd attributes.