Kbd

Display keyboard keys and shortcuts with proper styling.

Basic Usage

K
dart
1
DKbd(value: 'K')

Keyboard Shortcuts

⌘+K ⌃+⇧+P ⌥+⇥
dart
1
2
3
DKbd(keys: ['cmd', 'K'])
DKbd(keys: ['ctrl', 'shift', 'P'])
DKbd(keys: ['alt', 'tab'])

Sizes

XS SM MD
dart
1
2
3
DKbd(value: 'XS', size: DKbdSize.xs)
DKbd(value: 'SM', size: DKbdSize.sm)
DKbd(value: 'MD', size: DKbdSize.md)

Special Keys

Special key names are automatically converted to their symbols.

⌘ ⌃ ⌥ ⇧ ⏎ ⇥ ⎋ ⌫
dart
1
2
3
4
5
6
7
8
DKbd(value: 'cmd')      // ⌘
DKbd(value: 'ctrl')     // ⌃
DKbd(value: 'alt')      // ⌥
DKbd(value: 'shift')    // ⇧
DKbd(value: 'enter')    // ⏎
DKbd(value: 'tab')      // ⇥
DKbd(value: 'esc')      // ⎋
DKbd(value: 'backspace') // ⌫

Arrow Keys

↑ ↓ ← →
dart
1
2
3
4
DKbd(value: 'up')    // ↑
DKbd(value: 'down')  // ↓
DKbd(value: 'left')  // ←
DKbd(value: 'right') // →

DShortcut

A convenience wrapper for creating keyboard shortcuts.

⌘+S ⌘+⇧+Z
dart
1
2
DShortcut(keys: ['cmd', 'S'])
DShortcut(keys: ['cmd', 'shift', 'Z'])

Platform-aware Shortcuts

DPlatformShortcut shows Cmd on Mac and Ctrl on other platforms.

⌘+C ⌘+⇧+V ⌘+⌥+Z
dart
1
2
3
DPlatformShortcut(keyName: 'C')
DPlatformShortcut(keyName: 'V', withShift: true)
DPlatformShortcut(keyName: 'Z', withAlt: true)

API Reference

DKbd

Prop Type Default Description
value String? null Single key to display
keys List<String>? null Multiple keys for shortcuts
size DKbdSize sm Key size (xs, sm, md)
classes String? null Additional CSS classes

DPlatformShortcut

Prop Type Default Description
keyName String required The main key to display
withShift bool false Include Shift modifier
withAlt bool false Include Alt modifier
size DKbdSize sm Key size
classes String? null Additional CSS classes