Keyboard
A hint that shows the keyboard shortcut for an action.
The <Keyboard> component renders a keyboard-shortcut hint, such as ⌘K, as a <kbd> element. Use it to surface the shortcut for an action, inside a <Menu.Item> or anywhere you reference a key, such as help text, an empty state, or a tooltip.
Anatomy
A keyboard hint is a single <kbd> element with no parts of its own.
Appearance
By default <Keyboard> renders as a small key-cap. When it sits inside a container that styles shortcut hints, such as a <Menu.Item>, it adopts that container's treatment instead. In a menu the hint is a flat, muted label aligned to the right, which keeps it quiet next to the command rather than competing with it.
This adaptation is inferred automatically from the surrounding context. See Slot-Driven Composition for how this works.
Usage
Reach for <Keyboard> when an action has a keyboard shortcut worth surfacing. The hint helps people discover the shortcut and rewards repeat use, without changing what the action does.
On its own
Use <Keyboard> inline wherever you reference a shortcut, such as help text, an empty state, or a tooltip. On its own it renders as a key-cap.
import { Keyboard, Text } from '@marigold/components';export default () => ( <Text> Press <Keyboard>⌘K</Keyboard> to open search. </Text>);Inside a menu item
Add <Keyboard> after a <Menu.Item> label to show the command's shortcut. In a menu it renders as a flat, muted hint aligned to the right. Set textValue on the item so type-ahead matches the label and ignores the shortcut text.
import { Keyboard, Menu, TextValue } from '@marigold/components';import { ClipboardPaste, Copy } from '@marigold/icons';export default () => ( <Menu label="Edit"> <Menu.Item id="copy" textValue="Copy"> <Copy /> <TextValue>Copy</TextValue> <Keyboard>⌘C</Keyboard> </Menu.Item> <Menu.Item id="paste" textValue="Paste"> <ClipboardPaste /> <TextValue>Paste</TextValue> <Keyboard>⌘V</Keyboard> </Menu.Item> </Menu>);Do
Show a shortcut only when the action has one, and match the hint to the real key binding.
Don't
Don't use <Keyboard> as decoration or for text that isn't a shortcut.
Accessibility
<Keyboard> renders as a <kbd> element, the semantic markup for keyboard input. Inside a <Menu.Item> it is wired to the item's accessible description automatically, so a screen reader announces the command's label first and the shortcut after, with no manual aria attributes.
The hint is a convenience for sighted users. It does not register the key binding, so make sure the shortcut it shows is actually handled by your application.
Props
Keyboard
Prop
Type
Accessibility props (54)
Prop
Type
DOM event handlers (164)
Prop
Type