---
title: Keyboard
---
The [`` HTML element][kbd] HTML element represents computer keyboard
interactions. We use them to display keyboard navigation instructions, such
as pressing Tab or Enter.
`` elements should have 8px horizontal margins from adjacent text
and other elements. They're styled with display: inline-block,
so you can use horizontal margin utility classes to adjust spacing on each side.
At our body font-size of 16px the Rubik space character is about 4px wide,
so you can use `m*-4` utilities around text with spaces, and `m-*8` on elements
without spaces in between them.
## Keyboard shortcut
```html
Press Control + X at any time to close this dialog.
```
## Data Stories component
```html
-
Control +
Enter to enter the dashboard
-
Tab or Arrow to move
between visuals
-
Control +
Right arrow to enter a visual or filter
- Escape to exit a visual or dashboard
```
### Wrap behavior
`kbd` elements on adjacent lines should not overlap. When marking up key
combinations such as `Control + Enter`, add spacing utilities to the `+`
(e.g. `+`) to keep `kbd` elements that wrap to
the beginning of a line aligned to the left edge of their container:
```html
- Control + Enter to enter the dashboard
- Tab or Arrow to move between visuals
-
Control + Right arrow to
enter a visual or filter
- Escape to exit a visual or dashboard