Presentational “Press X to see Y” chip for keyboard shortcut affordances.
Location: src/components/ui/KeyboardHint.tsx
Usage
Pair with a key listener (see ShortcutDemo) or any onActivate handler.
import KeyboardHint from "@/components/ui/KeyboardHint";
<KeyboardHint
keyLabel="s"
actionLabel="Security stack"
onActivate={() => setOpen(true)}
/>
Props
| Prop | Type | Description |
|---|---|---|
keyLabel | string | Key shown in the <kbd> |
actionLabel | string | Short label after “to see the …” |
onActivate | () => void | Optional click handler |
className | string | Extra classes |
Related
- ShortcutDemo — homepage demo (config-gated)
- Modal — dialog used by the demo