Primitives
Kbd
Displays keyboard shortcut indicators with styled key caps. Useful for showing hotkeys, shortcuts, and key combinations.
Live Demo
Interactive keyboard shortcut display with key combinations, single keys, and labeled shortcuts.
Key Combinations
Ctrl+KShift+Enter⌘+CCtrl+Shift+P
Single Keys
EscTabSpaceEnterF1Delete
Labeled Shortcuts
Search⌘+KSaveCtrl+SUndoCtrl+ZCloseAlt+F4
Installation
npm install @trinkui/reactImport
import { Kbd } from "@trinkui/react";Usage
Ctrl+K
Shift+Enter
⌘+S
<Kbd keys={["Ctrl", "K"]} />
<Kbd keys={["Shift", "Enter"]} />
<Kbd keys={["⌘", "S"]} />Single Key
EscTabSpaceF1
<Kbd keys={["Esc"]} />
<Kbd keys={["Tab"]} />
<Kbd keys={["Space"]} />
<Kbd keys={["F1"]} />With Label
Search⌘+KSaveCtrl+S
<Kbd keys={["⌘", "K"]}>Search</Kbd>
<Kbd keys={["Ctrl", "S"]}>Save</Kbd>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| keys | string[] | -- | Array of key labels to display as key caps |
| children | ReactNode | -- | Optional label shown alongside the keyboard shortcut |
| className | string | -- | Additional CSS classes |
Accessibility
- Uses semantic
<kbd>elements for each key. - Key separator characters are decorative and do not interfere with screen readers.
- Font size and contrast meet WCAG AA requirements.