CSS-Only

Kbd (Keyboard)

Semantic keyboard key component for displaying keyboard shortcuts and key combinations with 3D physical key effects. Provides hover and active press states for visual realism.

Example

Press Ctrl + K to open command palette

Save with ⌘ + S

<p>Press <kbd class="omni-kbd">Ctrl</kbd> + <kbd class="omni-kbd">K</kbd> to open command palette</p>
<p>Save with <kbd class="omni-kbd" aria-label="Command">⌘</kbd> + <kbd class="omni-kbd">S</kbd></p>

Single Keys

Display individual keyboard keys with 3D physical key styling:

A Z 0 Esc Enter Space 
<kbd class="omni-kbd">A</kbd>
<kbd class="omni-kbd">Esc</kbd>
<kbd class="omni-kbd">Enter</kbd>

Key Combinations

Display keyboard shortcuts with multiple keys:

Ctrl + C — Copy

Ctrl + V — Paste

Ctrl + Shift + P — Command Palette

Alt + F4 — Close Window

<p><kbd class="omni-kbd">Ctrl</kbd> + <kbd class="omni-kbd">C</kbd> — Copy</p>
<p><kbd class="omni-kbd">Ctrl</kbd> + <kbd class="omni-kbd">Shift</kbd> + <kbd class="omni-kbd">P</kbd> — Command Palette</p>

Platform Symbols

Use Unicode symbols for platform-specific modifier keys. Always include aria-label for symbols:

⌘ + S — Save (Mac)

⇧ + ⌘ + P — Command Palette (Mac)

⌥ + ⌘ + I — Developer Tools (Mac)

⌃ + R — Reload (Mac)

<!-- ALWAYS include aria-label for symbols -->
<kbd class="omni-kbd" aria-label="Command">⌘</kbd> + <kbd class="omni-kbd">S</kbd>
<kbd class="omni-kbd" aria-label="Shift">⇧</kbd> + <kbd class="omni-kbd">Tab</kbd>

Common Platform Symbols

Symbol Rendered Name Platforms
⌘ ⌘ Command macOS
⇧ ⇧ Shift All platforms
⌥ ⌥ Option macOS
⌃ ⌃ Control macOS
⏎ ⏎ Return/Enter All platforms
⌫ ⌫ Backspace/Delete All platforms
⇥ ⇥ Tab All platforms

Sizes

Use data-size to adjust key dimensions:

Esc Ctrl Enter 
<kbd class="omni-kbd" data-size="sm">Esc</kbd>
<kbd class="omni-kbd">Ctrl</kbd>
<kbd class="omni-kbd" data-size="lg">Enter</kbd>

Interactive States

Keys have hover and active states that simulate physical key presses. Try hovering and clicking these keys:

Hover me Click me Press me

Effects:

  • Default: 2px shadow below key
  • Hover: 1px shadow, moves down 1px
  • Active: No shadow, moves down 2px (fully pressed)

Common Shortcut Examples

Text Editing

Ctrl + C — Copy

Ctrl + X — Cut

Ctrl + V — Paste

Ctrl + Z — Undo

Ctrl + Y — Redo

Navigation

Tab — Next field

Shift + Tab — Previous field

Enter — Submit/Confirm

Esc — Cancel/Close

↑ ↓ ← → — Arrow navigation

Application Commands

Ctrl + S — Save

Ctrl + P — Print

Ctrl + F — Find

Ctrl + K — Quick search

Ctrl + Shift + P — Command palette

API Reference

Attribute Values Default Description
data-size sm, md, lg md Key size (font size and padding)
aria-label String — Required for symbol keys (⌘, ⇧, etc.)

CSS Custom Properties

Property Default Description
--omni-kbd-font-size 0.85em Font size relative to parent
--omni-kbd-padding-x 0.5em Horizontal padding
--omni-kbd-padding-y 0.2em Vertical padding

Accessibility

  • Uses semantic <kbd> element for keyboard input
  • Symbol keys require aria-label for screen reader accessibility (⌘, ⇧, ⌥, etc.)
  • Text keys are automatically announced by screen readers
  • Visual 3D effect with box-shadow provides clear visual affordance
  • Hover and active states simulate physical key press for tactile feedback
  • Respects prefers-reduced-motion to disable transform animations
  • Uses monospace font for consistent character width and keyboard aesthetic
  • Keys are non-interactive by default (presentational only)

Best Practices

  • Always use aria-label for symbols: <kbd aria-label="Command">⌘</kbd>
  • Use platform-appropriate conventions: Show Cmd (⌘) for macOS, Ctrl for Windows/Linux
  • Separate keys with +: <kbd>Ctrl</kbd> + <kbd>K</kbd> (not combined in one element)
  • Use proper key names: "Enter" not "Return", "Esc" not "Escape"
  • Group related shortcuts: Use consistent formatting in lists or tables
  • Keep it inline: Kbd is designed for inline use within text