Skip to main content

​
Overview

HuxKBD is a small, styled box component that resembles a physical keyboard key. It is primarily used to display keyboard shortcuts (e.g., “⌘K”) or specific keys (e.g., “Enter”, “Esc”) in a visually distinct way. It is fully theme-aware and adapts seamlessly to light and dark modes.

​
Basic Usage

HuxKBD(shortcut: '⌘K')

​
Examples

​
Single Keys

Display individual modifier or action keys. 
Row(
  children: [
    HuxKBD(shortcut: '⌘'),
    HuxKBD(shortcut: '⇧'),
    HuxKBD(shortcut: 'Enter'),
  ],
)

​
Combinations

Display keyboard shortcut combinations. 
HuxKBD(shortcut: '⌘⇧P')

​
Inline with Text

Use HuxKBD within text to provide clear action indicators. 
Row(
  children: [
    Text('Press'),
    SizedBox(width: 4),
    HuxKBD(shortcut: 'Enter'),
    SizedBox(width: 4),
    Text('to submit'),
  ],
)

​
Integration with HuxCommand

HuxKBD is integrated into the HuxCommand palette by default to display shortcuts for each command item. This ensures a consistent look and feel throughout the library. 
HuxCommandItem(
  id: 'save',
  label: 'Save',
  shortcut: '⌘S', // Uses HuxKBD internally
  onExecute: () => print('Saved'),
)

​
API Reference

​
HuxKBD Properties

PropertyTypeDefaultDescription
shortcutStringrequiredThe text to display inside the key (e.g., “⌘K”, “Enter”)

​
Accessibility

HuxKBD uses a monospace font and consistent padding to ensure readability for the special symbols often used in shortcuts. It automatically uses HuxTokens.surfaceSecondary for its background and HuxTokens.textTertiary for its text, ensuring appropriate contrast in both light and dark themes.