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.
Import#
import { Kbd } from '@chakra-ui/react'
<span><Kbd>shift</Kbd> + <Kbd>H</Kbd></span>
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.
Modifier#
The only punctuation you should need is the + to indicate that a combination of keys will activate the shortcut.
<span><Kbd>shift</Kbd> + <Kbd>H</Kbd></span>
For a sequence of keys where one must follow the other, write "then" in between. Stick to lowercase to match the non-letter keys.
<span><Kbd>shift</Kbd> then <Kbd>H</Kbd></span>
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.
<span><Kbd>alt</Kbd> or <Kbd>option</Kbd></span>