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.

import { Kbd } from 'reablocks';


export default function App() {
return <Kbd keycode="option+m"></Kbd>
}

import { Kbd } from 'reablocks';

export default function App() {
return <Kbd keycode="option+m"></Kbd>
}

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)

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:

Name	Type	Default
`keycode`	`string` Keycode for the Kbd.
`theme`	`KbdTheme` Theme for the Kbd.
`color`	`string` Color variant for the chip.	`'default'`
`size`	`string` Size variant for the chip.	`'medium'`
`variant`	`string` Style variant for the chip.	`'filled'`
`selected`	`boolean` Whether the chip is selected.
`disabled`	`boolean` Whether the chip is disabled.
`disableMargins`	`boolean` Whether to disable the margins.
`start`	`string \| ReactElement<unknown, string \| JSXElementConstructor<any>>` Content to display before the chip label.
`end`	`string \| ReactElement<unknown, string \| JSXElementConstructor<any>>` Content to display after the chip label.

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.