Kbd

v0.4.0

Keyboard shortcut display component with platform-aware symbols (⌘ on Mac, Ctrl on Windows).

Live Demo

Keyboard Shortcuts

SearchCtrlK

SubmitCtrl↵

CloseEsc

PreviousShiftK

In Buttons

Installation

npm install noorui-rtl

Usage

import { Kbd } from 'noorui-rtl'

// Platform-aware (⌘ on Mac, Ctrl on Windows)
<Kbd keys={['mod', 'k']} />

// Specific keys
<Kbd keys={['esc']} />
<Kbd keys={['shift', 'enter']} />

// In buttons
<Button>
  Submit <Kbd keys={['mod', 'enter']} size="sm" />
</Button>

Props

Name	Type	Default	Description
`keys`	`string[]`	`undefined`	Array of keys to display. Use "mod" for platform-aware Cmd/Ctrl
`variant`	`'default' \| 'outline' \| 'ghost'`	`'default'`	Visual style variant (default, outline, or ghost)
`size`	`'sm' \| 'md' \| 'lg'`	`'sm'`	Size of the component (sm, md, or lg)
`className`	`string`	`undefined`	Additional CSS classes to apply

Best Practices

Do

✓ Always use "mod" for Cmd/Ctrl to ensure platform-appropriate shortcuts
✓ Display keyboard shortcuts next to their corresponding actions in UI
✓ Use standard, familiar key combinations (e.g., mod+k for search)
✓ Keep shortcuts consistent across your application
✓ Document all keyboard shortcuts in a help menu or modal

Don't

✗ Don't use Cmd or Ctrl directly - always use 'mod' for cross-platform support
✗ Don't create conflicting shortcuts with browser/OS defaults
✗ Don't use more than 3 keys in a combination - they're hard to remember
✗ Don't hide critical functionality behind shortcuts only - provide UI alternatives
✗ Don't forget to test shortcuts on both Mac and Windows