Keyboard Key

The keyboard key component exists 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.

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.
Ads via Chakra UI

Import#

import { Kbd } from "@chakra-ui/react"
shift + H
Editable Example

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 that a combination of keys will activate the shortcut.

shift + H
Editable Example

For a sequence of keys where one must follow the other, write "then" in between. Stick to lowercase to match the non-letter keys.

shift then H
Editable Example

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

alt or option
Editable Example
Edit this page