Kbd
A keyboard key indicator component for displaying keyboard shortcuts and key combinations
Installation
Terminal
Import
Component.tsx
Basic
Basic usage of the Kbd component.
This story demonstrates how to use the Kbd component with different combinations of keys.
It shows examples with single key, multiple keys, and nested keys.
```tsx
<Kbd keys={["command"]}>K</Kbd>
<Kbd keys={["command", "shift"]}>K</Kbd>
<Kbd keys={["command", "shift", "option"]}>K</Kbd>
<Kbd keys={["command", "shift", "option", "ctrl"]}>K</Kbd>
```
kbdKeysMap:
```ts
{
command: '⌘',
windows: '⊞',
shift: '⇧',
ctrl: '⌃',
option: '⌥',
alt: '⌥',
enter: '↵',
delete: '⌫',
backspace: '⌫',
escape: '⎋',
tab: '⇥',
capslock: '⇪',
up: '↑',
right: '→',
down: '↓',
left: '←',
pageup: '⇞',
pagedown: '⇟',
home: '↖',
end: '↘',
help: '?',
space: '␣',
}
```
⌘K⌘⇧K⌘⇧⌥K⌘⇧⌥⌃K
API reference
| Kbd | Type | Default |
|---|---|---|
keys | KbdKey |KbdKey[] |undefined | - |