Kbd

Keyboard keys and shortcuts.

import { Kbd } from 'components/UI/Kbd'

Examples

Use this to show a key or a shortcut in text. Use md by default and sm in dense UI. Set platform="other" for Windows and Linux names.

md · default

Enter

sm · dense UI

K

Mac shortcut

Windows shortcut

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Keycaps show keys. They do not run commands, so register the shortcut yourself.
Kbd.Shortcut shows Mac symbols by default. Set platform when you know the user's platform.

These are site components. Kbd takes kbd element props. Kbd.Shortcut takes span element props.

Prop	Type	Default	Description
children	ReactNode	–	The key label.
size	'sm' \| 'md'	'md'	The keycap height and text size.

Prop	Type	Default	Description
keys	readonly string[]	–	The keys in display order. Required.
platform	'mac' \| 'other'	'mac'	Use Control and Alt labels on other platforms.
size	'sm' \| 'md'	'md'	The size of each keycap.