Liferay.Design / Lexicon
Get StartedResources
Part of Liferay, IncCode/Content Licenses


Sign In
View in FigmaView in ClayDocumentation

A visual pattern used to allow users to learn how to access actions via keyboard.

Light keys: Esc, Command, Control + Copy


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.

Light keys: Press Command + N to open a new file


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.

Keys adjusted to the text


You can place unicode symbols inside your keys. You can find a list with some of the most common symbols below:

Command Key
Leftwards Arrow
Upward Arrow
Rightwards Arrow
Downward Arrow
Upward and Downward Arrows
Carriage Return
Option Key



This variation of key displays the keyboard shortcut in a light background with a secondary text and a border.

Light keys


The dark variation of keys displays the keyboard shortcut in a dark background with light text.

Dark Keys


Keys can also be customized to meet the needs of your design but we recommend being consistent with any decision taken.

Custom Keys in a dropdown menu


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.

Tooltips with keys in a dropdown menu

Something to improve? Report an issue!