Docs
πŸ—οΈ ⏐ Components
Elements
Kbd

Kbd

The Kbd (Keyboard Shortcut Chip) component is designed to visually represent keyboard shortcuts within your web application. It's particularly useful for highlighting shortcuts on hover over UI elements or integrating with command-driven features like the Command Palette component.

Quick Start

To start using the Kbd component, import it from the reablocks library and provide the keycode prop.

option
m

Examples

Basic Usage

Showcase keyboard shortcuts effectively to enhance usability and provide quick access to application functionalities.

Theme Customization

The Kbd component comes with a default theme designed for clarity and readability. Customize this theme to align with your application's aesthetics and branding:

  • root{}(2 keys)
      Show all

Learn more about how to customize in the Theme documentation.

API

The Kbd component API is straightforward, focusing on the essential functionality of displaying keyboard shortcuts:

PropDescriptionDefault
keycode *Keycode for the Kbd.
string
themeTheme for the Kbd.
KbdTheme
colorColor variant for the chip.
string
sizeSize variant for the chip.
string
variantStyle variant for the chip.
string
selectedWhether the chip is selected.
boolean
disabledWhether the chip is disabled.
boolean
disableMarginsWhether to disable the margins.
boolean
startContent to display before the chip label.
string | ReactElement<any, string | JSXElementConstructor<any>>
endContent to display before the chip label.
string | ReactElement<any, string | JSXElementConstructor<any>>

Design and Usability Tips

  • Clear Formatting: Ensure keyboard shortcuts are displayed in a clear, easily understood format. Use symbols and abbreviations recognized by most users (e.g., "Cmd" for Command, "Ctrl" for Control).

  • Strategic Positioning: Place Kbd components where they are most relevant within your UI. Consider proximity to the related action or feature to help users make the connection between the shortcut and its function.