Kbd
A single keyboard key or shortcut token, for naming a binding inline in prose or beside a menu item.
Basic
A chord
One token per key. Several in a row read as keys pressed together.
Sizes
sm (the default) sits inside body text; md and lg are for legends set beside larger type or beside a Keyboard.
- Corners follow the radius appearance - 6px when cornered, 10px when soft
Tones
tone colors the border and legend - a decorative choice, not a status - while the key surface stays neutral.
In a sentence
It keeps the surrounding line height, so a paragraph does not grow around it.
Press ⌘ K to open the command menu, or Esc to dismiss it.
- Under the glass material it takes a dedicated surface, since a translucent key left its own label below WCAG AA
When to use
- Naming a key or shortcut inline in prose, a tooltip, or beside a menu item.
- Spelling out a chord as one token per key, so each reads as something to press.
When not to use
- Drawing a full on-screen keyboard, or showing where a shortcut sits on one - use Keyboard, which renders whole layouts in the same key vocabulary.
- Anything clickable - Kbd is static text, so a control that looks like a key is a Button.
- A status label or count - use Badge.
Accessibility notes
- Renders a native <kbd> element. Most screen readers read its text without announcing it as a key, so the surrounding sentence should make the action clear.
- Symbol legends such as ⌘, ⇧ and ⌥ are announced inconsistently or not at all - where the shortcut matters, add the key name as visually hidden text.
Common mistakes
- Wrapping a Kbd in a button or link to make a key look pressable - style the Button instead and keep Kbd for the legend.
Known limitations
- No platform detection - it renders exactly the legend you pass, so showing ⌘ on macOS and Ctrl elsewhere is up to you.
Related components
API reference
Chip scale, for legends set beside larger type or beside a `Keyboard`. Default "sm".
Border/text color. Default "default" (neutral).
Also accepts everything from React.HTMLAttributes<HTMLElement>.
Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent