Components

Keyboard Key

The keyboard shortcut exists only to show which key or combination of keys performs a given action. The action itself should be further explained in accompanying content. It renders a <kbd> element.

Guideline

All shortcuts should do their best to match what appears on the user’s keyboard.

  • All single letters A-Z are uppercase.
  • For non-letter keys such as enter, esc and shift, stick to lowercase.
  • Use the arrow symbol as opposed to spelling things out.

Modifer

The only punctuation you should need is the + to indicate a combination of keys will activate the shortcut.

For a sequence of keys where one must follow the other, spell out then. Stick to lowercase to match the non-letter keys.

If two different keys can execute the same action, or the shortcut itself may look different on the user’s keyboard, insert or.