Keyboard Key

The keyboard key component exists to show which key or combination of keys performs a given action.

Source@chakra-ui/react

Import#

import { Kbd } from '@chakra-ui/react'

Usage#

<span>
<Kbd>shift</Kbd> + <Kbd>H</Kbd>
</span>

Representing a sequence of keyboard#

For a sequence of keys where one must follow the other, write "then" in between. Use 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>
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel