Kbd
Semantic keyboard-shortcut pill covering: semantic <kbd> element, sizes, variants, key sequences, platform-aware modifier symbols.
Live Preview
Adjust size and variant to see the single Kbd and multi-key sequences update instantly.
1<Kbd size="md" variant="default">K</Kbd>2<KbdSequence keys={['cmd', 'shift', 'K']} size="md" variant="default" />3<KbdSequence keys={['ctrl', 'alt', 'delete']} size="md" variant="default" />Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import Kbd and KbdSequence into your file.
import { Kbd, KbdSequence } from '@/components/aidash/kbd';Basic Usage
Render a single key with the semantic <kbd> element.
1<Kbd>K</Kbd>Sizes
Three sizes to fit inline copy, buttons, or callouts.
1<Kbd size="sm">Sm</Kbd>2<Kbd size="md">Md</Kbd>3<Kbd size="lg">Lg</Kbd>Variants
Default uses a subtle two-tone key look; outline drops the shadow; ghost drops the border.
1<Kbd variant="default">Default</Kbd>2<Kbd variant="outline">Outline</Kbd>3<Kbd variant="ghost">Ghost</Kbd>Key Sequences
Compose multi-key shortcuts with KbdSequence. Symbolic modifiers resolve to glyphs, and 'mod' picks the right modifier per platform.
1<KbdSequence keys={['mod', 'shift', 'P']} />2<KbdSequence keys={['mod', 'K']} />3<KbdSequence keys={['shift', 'enter']} separator="then" />Modifier Keys
Symbolic key names resolve to glyphs. The 'mod' and 'alt' entries adapt to the visitor's platform on the client.
| Input | Mac | Other | Preview |
|---|---|---|---|
| 'mod' | ⌘ | Ctrl | ⌘ |
| 'cmd' | ⌘ | ⌘ | ⌘ |
| 'ctrl' | Ctrl | Ctrl | Ctrl |
| 'shift' | ⇧ | ⇧ | ⇧ |
| 'alt' | ⌥ | Alt | ⌥ |
| 'enter' | ↵ | ↵ | ↵ |
| 'escape' | Esc | Esc | Esc |
| 'tab' | ⇥ | ⇥ | ⇥ |
| 'space' | ␣ | ␣ | ␣ |
| 'up' | ↑ ↓ ← → | ↑ ↓ ← → | ↑ ↓ ← → |
| 'backspace' | ⌫ | ⌫ | ⌫ |
| 'delete' | ⌦ | ⌦ | ⌦ |
1<KbdSequence keys={['mod', 'K']} />2<KbdSequence keys={['shift', 'tab']} />3<KbdSequence keys={['alt', 'enter']} />4<KbdSequence keys={['up', 'down', 'left', 'right']} separator="," />In Context
Kbd is designed to sit inline within body copy.
Press Ctrl+K to open the command palette.
Use Ctrl+⇧+P to jump to a file, or hit Esc to dismiss any open dialog.
1<p>2 Press <KbdSequence keys={['mod', 'K']} size="sm" /> to open the command palette.3</p>4<p>5 Use <KbdSequence keys={['mod', 'shift', 'P']} size="sm" /> to jump to a file,6 or hit <Kbd size="sm">Esc</Kbd> to dismiss any open dialog.7</p>Accessibility
Kbd leans on native HTML semantics and readable glyph mappings.
Semantic <kbd> element
Renders the native <kbd> element so screen readers and assistive tech announce it as user input rather than plain text.
Platform-aware modifier symbols
mod resolves to ⌘ on Mac and Ctrl elsewhere, keeping labels aligned with what users see on their keyboard.
Screen-reader-friendly text alternative
When a glyph alone might be ambiguous (e.g. an arrow key), wrap the sequence in a labelled container or pair it with a visually-hidden description so the shortcut is announced clearly.
1<span>2 <span className="sr-only">Command shift K</span>3 <KbdSequence keys={['mod', 'shift', 'K']} aria-hidden />4</span>API Reference
Props for Kbd and KbdSequence.
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | React.ReactNode | — | Content rendered inside the key pill — text or a pre-formatted symbol. |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the key pill. |
| variant | 'default' | 'ghost' | 'outline' | 'default' | Visual variant of the key. |
| className | string | '' | Additional CSS classes appended to the root <kbd> element. |
| Prop | Type | Default | Description |
|---|---|---|---|
| keys* | (string | KbdSequenceKey)[] | — | Ordered list of keys. Symbolic names like 'mod', 'shift', 'enter' resolve to glyphs; other strings render verbatim. |
| size | 'sm' | 'md' | 'lg' | 'md' | Size applied to every child Kbd. |
| variant | 'default' | 'ghost' | 'outline' | 'default' | Variant applied to every child Kbd. |
| separator | React.ReactNode | '+' | Node rendered between each key. |
| className | string | '' | Additional CSS classes appended to the root wrapper. |
Related
Other components that work well alongside Kbd.