Components · Typography
Kbd
Keyboard shortcut hint.
Shortcut
⌘ K
import { Kbd } from '@rookcom/monarch-react';
<Kbd>⌘</Kbd> <Kbd>K</Kbd>Usage examples
The example at the top of the page is the only one for this component.
Purpose
Shows a keyboard key or shortcut, e.g. ⌘K.
Use when
- Hinting a shortcut in a menu, tooltip or help text.
Design principles
- Semantic: renders a native
<kbd>element.
API reference
import { Kbd } from '@rookcom/monarch-react';| Export | Kind | Rendering | Root class |
|---|---|---|---|
Kbd | component | server-safe | .mn-kbd |
Native <kbd> attributes pass through.
Generated from the TypeScript declarations of packages/react/src/components/typography/kbd.
Properties
Kbd
A keyboard key or shortcut, e.g. <Kbd>⌘K</Kbd>.
| Prop | Type | Description |
|---|---|---|
children | ReactNode | |
className | string | |
id | string |
Variants
Kbd has no variants.
States
No states: it renders static content.
Interaction behaviour
Not interactive.
Keyboard support
Not interactive; it only displays a key.
Accessibility
- Screen readers read the key text; spell out symbols nearby if they are not obvious.
Responsive behaviour
- Inline element; no breakpoints.
Theme support
- Border, surface and text use Monarch semantic tokens.
Do and don't
Do
- Use one Kbd per key in a combination.
Don't
- Do not use Kbd for code snippets; use
<code>.
Related components
- DropdownMenu: Menu items show shortcuts with
shortcut.
Dependencies
| Kind | Depends on |
|---|---|
| npm packages | None |
| Monarch components | None |
Testing coverage
- Renders a
<kbd>element.
| Check | Covered |
|---|---|
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery |
Tests: packages/react/src/components/typography/kbd