Kbd

A keyboard shortcut as physical keys.

Esc

<mm-kbd keys="mod+k"></mm-kbd>
<mm-kbd>Esc</mm-kbd>

Guidance

Keycaps show a keyboard shortcut as a physical key: 13px mono on mm-surface with a 1px rule border, a 2px bottom border and radius-sm. Show them beside actions in menus, in search inputs and on every command palette row. Give keys a shortcut such as mod+k and the platform decides the modifier: ⌘ on macOS and iOS, Ctrl elsewhere. Each key is its own cap, separated by a non-breaking space, and the shortcut is read out in words ("Control K", "Command K"). For a single key, slot its name instead.

Properties

Property	Attribute	Type	Default	Description
keys	keys	string	''	A shortcut such as mod+k, mod+shift+p or esc. mod is ⌘ on Apple platforms and Ctrl elsewhere.
label	label	string	''	Overrides the words read out for the shortcut.
platform	platform	'auto' | 'apple' | 'other'	'auto'	auto (default) detects the platform; apple or other force one, for documentation.

Slots

Slot	Description
Default	A single key name, used when keys is not set.

CSS parts

Part	Description
group	The outer kbd holding the combination.
key	Each keycap.

Examples

Every state of mm-kbd in Storybook, with keyboard and screen reader tests.