Keys
Sign InA visual pattern used to allow users to learn how to access actions via keyboard.
Definition
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.
Usage
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.
Style
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.
Unicode
You can place unicode symbols inside your keys. You can find a list with some of the most common symbols below:
| Name | Symbol |
|---|---|
| Command Key | ⌘ |
| Leftwards Arrow | ← |
| Upward Arrow | ↑ |
| Rightwards Arrow | → |
| Downward Arrow | ↓ |
| Upward and Downward Arrows | ⇅ |
| Carriage Return | ↵ |
| Option Key | ⌥ |
| Shift | ⇧ |
Variations
Light
This variation of key displays the keyboard shortcut in a light background with a secondary text and a border.
Dark
The dark variation of keys displays the keyboard shortcut in a dark background with light text.
Custom
Keys can also be customized to meet the needs of your design but we recommend being consistent with any decision taken.
Accessibility
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.
