Keyboard key

Keyboard key is used to educate merchants about keyboard shortcuts.


Examples

Use to list a related set of keyboard shortcuts.

Drag to resize example
<KeyboardKey>Ctrl</KeyboardKey>
Name
Type
Description
children
string
The content to display inside the key

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

Some merchants, particularly power users, may want to find ways to speed up their workflows.

Solution

The keyboard key component demonstrates how to speed up work using shortcuts.


Best practices

The keyboard key component should:

  • Include a heading to introduce and explain the shortcuts being described when more than one shortcut is listed
  • Include an action label to describe what will happen if merchants use the key combination

Content guidelines

Heading

Headings above the keyboard key should be:

  • Informative and descriptive
    • They should label the type of keyboard shortcuts being presented
  • Concise and scannable:
    • Use simple, clear language that can be read at a glance
    • Keep headings to single sentence and avoid using punctuation such as periods, commas, or semicolons
    • Avoid articles (the, a, an) to keep content short and actionable
    • Be written in sentence case (first word capitalized, the rest is lowercase)

Shortcut description

The shortcut description should describe what action will be taken if merchants tap certain keys. When a hotkey combination takes merchants to a location in the interface, the format should be: