Chakra-UI

I♥️Components

Keyboard Key

|

Chakra Docs

|

⦾ The Keyboard Key component, or Kbd as it is better known in Chakra UI, is a design tool that provides a visual guide to the keystrokes or keyboard combinations required to perform certain actions. This allows for an enhanced user experience, providing quick visual cues to the user and making complex applications more intuitive to navigate.

The Kbd component can be imported as follows:

Examples

How It Works

⦾ Let's say you have a feature in your application where pressing Ctrl + P initiates a printing action. Using the Kbd component, you can display this shortcut to your users as shown in the following example. The resultant display will visually isolate the keys involved in the shortcut, making it easy for users to understand.
<span> <Kbd>Ctrl</Kbd> + <Kbd>P</Kbd><span>

creates

Ctrl + P

Guidelines and Best Practices

⦾ The Kbd component is most effective when used with a consistent style that matches the appearance of the user's keyboard. For single letter keys (A, B, C, etc.), always use uppercase. However, for non-letter keys like enter, shift, ctrl, etc., stick to lowercase. Also, use the + symbol to indicate that a combination of keys activates the shortcut.
Ctrl + F5
<span><Kbd>Ctrl</Kbd> + <Kbd>P</Kbd></span>

Consecutive Key Presses

⦾ In the event that an action involves a sequence of keys where one key must be pressed after the other, use the word "then" in lowercase.
Alt then F4
<span><Kbd>Alt</Kbd> then <Kbd>F4</Kbd></span>

Flexibility

⦾ In cases where different keys execute the same action or the shortcut may appear differently on the user's keyboard, use "or" between the keys.
Ctrl or Cmd + S
<span><Kbd>Ctrl</Kbd> or <Kbd>Cmd</Kbd> + <Kbd>S</Kbd></span>

Did you know?

Creative Idea No. 1

Keyboard Shortcuts Guide: For complex applications that have a variety of keyboard shortcuts, you can use the Kbd component to create a comprehensive shortcut guide. This guide would allow users to easily understand the different keyboard shortcuts available and how to use them, enhancing accessibility and usability, particularly for power users who prefer keyboard interactions.

Shortcut Combinations

Ctrl + C:

Copy

Ctrl + V:

Paste

Ctrl + S:

Save

Code

Creative Idea No. 2

Keyboard Navigation Instructions: In web applications that support keyboard navigation (using arrow keys, tab key, etc.), the Kbd component can be used to provide clear instructions to users. It assists in enhancing the user experience by making navigation options more evident.

Keyboard Navigation

Next Item:

→

Previous Item:

←

Select Item:

Enter

Code

Creative Idea No. 3

Keyboard-Related Tutorials: If you are creating content that teaches users about programming, CLI commands, or any other topic that requires keyboard inputs, the Kbd component can be a great way to highlight the keys or key combinations users need to use.

To run the program, use:

python

filename.py

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.