---
id: kbd
title: Keyboard Key
category: 'data-display'
package: '@chakra-ui/layout'
description:
'The keyboard key component exists to show which key or combination of keys
performs a given action.'
---
## Import
```js
import { Kbd } from '@chakra-ui/react'
```
```jsx
shift + H
```
## 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.
```jsx
shift + H
```
For a sequence of keys where one must follow the other, write "then" in between.
Stick to lowercase to match the non-letter keys.
```jsx
shift then H
```
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.
```jsx
alt or option
```