Kbd
Shows a key or a keyboard shortcut, like Ctrl K, in the text, a menu or a tooltip. It only displays the keys; you wire the shortcut yourself.
Installation
Set up Camaleo once (Installation), then import what you need. It renders on the server.
import { Kbd } from "@camaleo/react";Anatomy
One <kbd> per key. A combination is several Kbd side by side, not one.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
Key combinations
One Kbd per key, so people see at a glance how many keys to press and which ones.
Mac symbols
⌘ and ⌥ mean nothing to a screen reader. Hide the glyph with aria-hidden and add the key's name with VisuallyHidden.
- Windows and Linux
- CtrlShiftZ
- macOS
- Z
Windows and Mac
The same action uses Ctrl on Windows and ⌘ on a Mac. When you don't know the system, show both, each with its name.
Go to inboxGthenI
Go to draftsGthenD
One key, then another
For shortcuts pressed one after the other, write "then" between the keys. Without it, people press them together.
In a menu
Open the menu. Shortcuts sit at the end of each item, so people learn them while they click. aria-keyshortcuts tells screen readers the keys.
In a tooltip
Hover or focus the button. The tooltip teaches the shortcut at the moment people use the action.
Command palette:CtrlShiftP
Change a shortcut
Click "Change shortcut" and press new keys. Tab and Escape are never recorded: Tab moves on, Escape cancels, so keyboard users can always leave.
In context
Shortcuts show up where people act. These are whole pieces of UI you can copy, in the skin you picked.
Keyboard shortcuts
Guidelines
Separate caps show how many keys there are, and each one reads as a key.
"Ctrl + S" in one box looks like a single key with a strange name.
Open the command paletteK
Screen readers skip ⌘ or read it as "place of interest". Add "Command" as hidden text.
Press ctrl and k to search
"Press ctrl and k" blends into the text, and people skimming the page miss it.
Props
Kbd has no props of its own. It renders a <kbd> and takes its attributes, like className and style.
Styling hooks
Restyle it without forking: target the slot, or set the tokens on a parent, a skin or the key itself.
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- Kbd does not create the shortcut. Listen for the keys yourself, and put aria-keyshortcuts on the control it triggers, like "Control+S".
- Symbols such as ⌘, ⌥ and ⇧ need a text name. Hide the glyph with aria-hidden and add the name with VisuallyHidden; many screen readers ignore aria-label on a <kbd>.
- Never take over Tab, Shift+Tab or Escape. People need them to move on and to leave (WCAG 2.1.2).
- Single-key shortcuts, like / or ?, must be easy to turn off, or only work while their area has focus (WCAG 2.1.4).