KeyboardShortcutsPanel
v1.0.0Scannable reference panel for keyboard shortcuts. Three trigger modes: inline (dedicated pages), button (sidebar/settings), and kbd (global ? key). Closes H7 (Flexibility/Efficiency) by surfacing accelerators, and H10 (Help/Documentation) via ambient self-documentation. Includes KeyboardBadge sub-component for styled <kbd> key display. Supports grouping, context-filtering, and multi-platform key variants.
import { KeyboardShortcutsPanel } from "@danagraph/design-system"Props
| Prop | Type | Default | Description |
|---|---|---|---|
shortcutsreq | ShortcutEntry[] | — | Array of shortcut definitions with label, keys, group, description, and optional context tag. |
trigger | "inline" | "button" | "kbd" | "inline" | How the panel is revealed. inline=always shown, button=toggle button, kbd=global ? key. |
triggerLabel | string | "Keyboard Shortcuts" | Label shown on the trigger button. |
title | string | "Keyboard Shortcuts" | Panel heading. |
defaultGroup | string | — | Pre-selected group filter on open. |
context | string | — | Current context key. When set, only shortcuts with matching context (or no context) are shown. |
shortcutsrequiredShortcutEntry[]Default —Array of shortcut definitions with label, keys, group, description, and optional context tag.
trigger"inline" | "button" | "kbd"Default "inline"How the panel is revealed. inline=always shown, button=toggle button, kbd=global ? key.
triggerLabelstringDefault "Keyboard Shortcuts"Label shown on the trigger button.
titlestringDefault "Keyboard Shortcuts"Panel heading.
defaultGroupstringDefault —Pre-selected group filter on open.
contextstringDefault —Current context key. When set, only shortcuts with matching context (or no context) are shown.
This component was designed to express:
Explore Related
Inline term definition for technical vocabulary — wraps jargon in a semantic abbr with a plain-language tooltip (H2 + H10)
Three-level disclosure primitive (compact / default / verbose) that resolves the H7 tension between Principle 02 (Ceremony Over Efficiency) and expert user needs. Includes DisclosureLevelToggle for shared list-level control.
Lightweight single-step confirmation dialog for destructive or consequential actions. Fills the H5 (Error Prevention) gap between zero-confirmation and the heavy CeremonyGate pattern. Includes useConfirmDialog hook for imperative usage.