Kbd

Keyboard key indicator for displaying keyboard shortcuts.

⌘K

Usage

import { Kbd, KBD_SIZE_CLASSES, KbdGroup, KbdGroupProps, KbdProps, kbdVariants } from "@instruments/materia-ui/components/kbd";

Wrap multi-key chords in KbdGroup and set size on the group - children inherit it via context, so you size the combo once.
It renders a semantic <kbd>; reserve it for keyboard keys/shortcuts, not as a generic small-label chip (that's Badge).

Prop	Type	Default	Description
tone	`"neutral" \| "brand" \| "danger" \| null \| undefined`
emphasis	`"outline" \| "solid" \| "ghost" \| "soft" \| null \| undefined`
size	`ResponsiveSize`	`"sm"`	Kbd size - a single token or a per-breakpoint object like `{ base: "sm", md: "lg" }`.

Prop	Type	Default	Description
size	`ResponsiveSize`		Size to apply to all child Kbd components - a single token or a per-breakpoint object like `{ base: "sm", md: "lg" }`.

Used by