> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thehuxdesign.com/llms.txt
> Use this file to discover all available pages before exploring further.

# KBD

> Beautiful keyboard key component for shortcuts and UI indicators

## 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

```dart theme={null}
HuxKBD(shortcut: '⌘K')
```

## Examples

### Single Keys

Display individual modifier or action keys.

```dart theme={null}
Row(
  children: [
    HuxKBD(shortcut: '⌘'),
    HuxKBD(shortcut: '⇧'),
    HuxKBD(shortcut: 'Enter'),
  ],
)
```

### Combinations

Display keyboard shortcut combinations.

```dart theme={null}
HuxKBD(shortcut: '⌘⇧P')
```

### Inline with Text

Use `HuxKBD` within text to provide clear action indicators.

```dart theme={null}
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.

```dart theme={null}
HuxCommandItem(
  id: 'save',
  label: 'Save',
  shortcut: '⌘S', // Uses HuxKBD internally
  onExecute: () => print('Saved'),
)
```

## API Reference

### HuxKBD Properties

| Property   | Type     | Default      | Description                                              |
| ---------- | -------- | ------------ | -------------------------------------------------------- |
| `shortcut` | `String` | **required** | The 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.