UI components · Keyboard
Kbd
Also called: Keyboard key, Keycap, Shortcut hint, Key hint
A text style that draws keyboard keys as little keycaps (Ctrl, ⌘ K, Esc). Used in menus, tooltips, and docs to tell users which key to press.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstGive every keyboard shortcut hint in the UI the same kbd keycap style: 20px tall, at least 20px wide, 5px horizontal padding, 12px monospace font, a 1px light gray border with a 2px bottom border, 4px corner radius, and a light gray background, vertically centered with the text beside it. Split key combos into separate kbd elements side by side with 2px gaps (like ⌘ K). Use them in three places: "⌘K" at the right end of the search box; gray "⌘C" and "⌘V" on the right of each dropdown menu item; and "Save ⌘S" in the Save button's tooltip. Switch by OS: show ⌘ ⇧ ⌥ on Mac and Ctrl Shift Alt on Windows. Keycaps are display only and not clickable.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Kbd is what you need.
Use Kbd when
- On the right side of dropdown and context menu items, showing each item's shortcut
- Next to a search box or command palette trigger, hinting at keys like "⌘K"
- Help docs, shortcut cheat sheets, and onboarding tours that tell users which key to press
Pick something else when
Function names, commands, and file paths that are part of code
Use insteadInline CodeShort words for status or category
Use insteadTagActions that run when clicked. Use a button, since keycaps are hints and shouldn't be clickable.
Use insteadButton
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Stacking both Mac and Windows versions (Ctrl / ⌘ + Shift / ⇧ + K), which reads like gibberish
- 02
Writing shortcuts as plain text like "ctrl+shift+k" inside a sentence, so they're hard to spot
- 03
Keycaps bigger than the body text with too much padding, stretching the line height of the whole row
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
One or more small keycaps side by side. Each is a rounded little box with a thin border and a thicker bottom edge holding a key name or symbol, with an optional "+" between keys in a combo.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
This component answers "how do I show a key?" It's a small box with a thin border and a slightly thicker bottom edge, like a keycap, with a key name inside such as Ctrl, ⌘, Shift, Enter, or K. For key combos, put several keycaps side by side, optionally with a "+" between them. You'll see it on the right side of each item in dropdown and context menus ("Copy ⌘C"), in button tooltips ("Save Ctrl+S"), at the right end of a search box ("⌘K"), in the hints at the bottom of a command palette, and in help docs. HTML has a dedicated kbd tag for it.
It's not the same as the interaction pattern Keyboard Shortcut. That one is about designing the feature itself, like "press Ctrl+K to open search." This is just how a key name looks on screen. It looks a lot like Inline Code, since both are a bit of text on a gray background. Inline code marks text you type or that appears in code (function names, commands). Kbd marks keys on the keyboard.
Mac and Windows write keys differently, so show the set for the user's OS (⌘ ⌥ ⇧ on Mac, Ctrl Alt Shift on Windows) instead of stacking both. Make keycaps one size smaller than body text and vertically centered so they don't stretch the line height. It's only a hint and shouldn't be clickable. Screen readers read the text inside kbd, so give symbol keys (⌘, ⇧) an aria-label or title that spells out the key name.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-kbd- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
kbd[data-slot="kbd"][data-slot$="-shortcut"].kbd.mantine-Kbd-root.chakra-kbd
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
kbdkeycapkey-capshortcut-keyshortcut-hinthotkeyhot-keykey-hintkbd-keykeyboard-key
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
KbdKbdGroupKeycapKeyboardKeyShortcutKeyHotkey
- Semantic tags and roles
A weak signal. It only counts together with other cues.
<kbd>
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
inline in text
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026