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.
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:
Prop | Description | Default |
---|---|---|
keycode * | Keycode for the Kbd.string | |
theme | Theme for the Kbd.KbdTheme | |
color | Color variant for the chip.string | |
size | Size variant for the chip.string | |
variant | Style variant for the chip.string | |
selected | Whether the chip is selected.boolean | |
disabled | Whether the chip is disabled.boolean | |
disableMargins | Whether to disable the margins.boolean | |
start | Content to display before the chip label.string | ReactElement<any, string | JSXElementConstructor<any>> | |
end | Content 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.