KBD
A small key cap that shows a key or a shortcut, such as ⌘ K, so people learn the fastest way to do something.
Preview
Platform
Surface
- Search⌘K
- Copy link⌘⇧C
- Send⌘↵
Hold the keys — the caps respond.
When to use
- Beside menu items and tooltips, to show the shortcut for that action.
- In help text and command menus.
Anatomy
- 1
Key cap
A small rounded box with a hairline border and a slightly deeper bottom edge.
- 2
Glyph
The key's symbol or name: ⌘, Shift, K.
- 3
Separator
Optional, between keys in a combination.
States
Light
On white surfaces.
Dark
On dark surfaces and tooltips.
Pressed
Where it reflects live key presses, the cap settles and fills.
Accessibility
- Uses the <kbd> element, nested for combinations, so the meaning survives outside the style.
- Symbols get readable names, such as "Command" for ⌘, through aria-label or visually hidden text.
Source
The KBD is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.
Tell me when the source landsTell me when the source landsand you'll get 10% off your first licence if you ever want the full library.
See it in a block