A visual pattern used to allow users to learn how to access actions via keyboard.
A key is a visual cue of one or multiple keys that are typed on the keyboard allowing users to interact with the interface instead of using a pointer device such as touch or mouse.
Use keys to let users identify how to complete a common task using the keyboard. Keys should be understandable, learnable and available yet easy to ignore.
Keys use a monospaced style for typography depending on the operating system. Text inside a key component should adjust to the same size of the text that is related to.
You can place unicode symbols inside your keys. You can find a list with some of the most common symbols below:
|Upward and Downward Arrows
This variation of key displays the keyboard shortcut in a light background with a secondary text and a border.
The dark variation of keys displays the keyboard shortcut in a dark background with light text.
Keys can also be customized to meet the needs of your design but we recommend being consistent with any decision taken.
Using keyboard shortcuts will make a product more accessible and usable. Listing all your keyboard shortcuts helps users to easily access and learn these shortcuts.
Also, as some users might find keys difficult to understand, we can provide some extra help using tooltips to clarify the name of the key such as Command. The tooltip should only be shown if the user hovers the key area.