How to build an accessible Kbd in React
Renders a native <kbd> element so assistive tech identifies the content as keyboard input; compose multiple <kbd> for a chord rather than encoding the combination in one string
When to use a Kbd
- Showing a keyboard key or shortcut the user should press
- Documenting hotkeys in menus, tooltips, or help text
When not to use it
- Inline code, commands, or identifiers — use Code
- A short label that is not a key press — use Badge or Text
Accessibility
Role kbd, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <Kbd>npm install</Kbd>
Prefer: <Code>npm install</Code>
Kbd is for keys to press, not shell commands or code
Example
<Kbd>⌘</Kbd>