Kbd

Visual representation of keyboard keys and shortcuts for documentation and UI guides

Basic Keyboard Keys

Simple keyboard key representations

Ctrl+C
Show Code

Keyboard Sizes

Different sizes for various contexts

Ctrl+C
Show Code

Key Combinations

Showing keyboard shortcuts and combinations

Ctrl+C
Show Code

Function Keys

Special function keys and longer key names

Ctrl+C
Show Code

Documentation Usage

Keyboard shortcuts in help documentation and tooltips

Ctrl+C
Show Code

Usage Notes

  • Use consistent key representations (⌘ for Mac Command, Ctrl for Windows/Linux)
  • Keep key labels short and recognizable
  • Group related key combinations with appropriate spacing and separators
  • Use smaller sizes for inline documentation and larger sizes for emphasis
  • Consider platform differences when showing shortcuts (Mac vs PC keys)
  • Combine with tooltips or help text to explain what shortcuts do