---
title: Keyboard markup
description: You can represent keyboard keys and shortcuts in your documentation using the {kbd} role. This is useful for showing keyboard commands and shortcuts in...
url: https://www.elastic.co/elastic/docs-builder/docs/3272/reference/docs-builder/syntax/kbd
products:
  - Elastic Docs Builder
---

# Keyboard markup
You can represent keyboard keys and shortcuts in your documentation using the `{kbd}` role. This is useful for showing keyboard commands and shortcuts in a visually consistent way. See the full list of [available keys](#available-keys).

## Basic usage

To display a keyboard key, use the syntax `{kbd}`key-name``. For example, writing `{kbd}`enter`` will render as a styled keyboard key.
<tab-set>
  <tab-item title="Output">
    Press <kbd>Enter</kbd> to submit.
  </tab-item>

  <tab-item title="Markdown">
    ```markdown
    Press {kbd}`enter` to submit.
    ```
  </tab-item>
</tab-set>


## Combining keys

For keyboard shortcuts involving multiple keys, you can combine them within a single `{kbd}` role by separating the key names with a `+`. Keys are always visually separated, even when using the combined syntax.
<tab-set>
  <tab-item title="Output">
    Use <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Enter</kbd> to execute the command.
  </tab-item>

  <tab-item title="Markdown">
    ```markdown
    Use {kbd}`cmd+shift+enter` to execute the command.
    ```
  </tab-item>
</tab-set>


## Alternative keys

To display alternative keys for a shortcut, use `|` to separate the alternate keys within the same `{kbd}` role. This is useful for showing platform-specific shortcuts, such as `ctrl` on Windows and `cmd` on macOS.
<tab-set>
  <tab-item title="Output">
    Use <kbd>Ctrl / Cmd</kbd> + <kbd>c</kbd> to copy text.
  </tab-item>

  <tab-item title="Markdown">
    ```markdown
    Use {kbd}`ctrl|cmd + c` to copy text.
    ```
  </tab-item>
</tab-set>


## Reserved characters

The `+` and `|` characters have special meaning for combining keys and specifying alternatives. To render them as literal keys, you must use their keyword equivalents.
- To display the <kbd>+</kbd> key, use ``{kbd}`plus``.
- To display the <kbd>|</kbd> key, use ``{kbd}`pipe``.


## Common shortcuts by platform

The platform-specific examples below demonstrate how to combine special keys and regular characters.
<tab-set>
  <tab-item title="Output">
    | Mac                               | Windows/Linux                      | Description                 |
    |-----------------------------------|------------------------------------|-----------------------------|
    | <kbd>Cmd</kbd> + <kbd>c</kbd>     | <kbd>Ctrl</kbd> + <kbd>c</kbd>     | Copy                        |
    | <kbd>Cmd</kbd> + <kbd>v</kbd>     | <kbd>Ctrl</kbd> + <kbd>v</kbd>     | Paste                       |
    | <kbd>Cmd</kbd> + <kbd>z</kbd>     | <kbd>Ctrl</kbd> + <kbd>z</kbd>     | Undo                        |
    | <kbd>Cmd</kbd> + <kbd>Enter</kbd> | <kbd>Ctrl</kbd> + <kbd>Enter</kbd> | Run a query                 |
    | <kbd>Cmd</kbd> + <kbd>/</kbd>     | <kbd>Ctrl</kbd> + <kbd>/</kbd>     | Comment or uncomment a line |
  </tab-item>

  <tab-item title="Markdown">
    ```markdown
    | Mac              | Windows/Linux     | Description                 |
    |------------------|-------------------|-----------------------------|
    | {kbd}`cmd+c`     | {kbd}`ctrl+c`     | Copy                        |
    | {kbd}`cmd+v`     | {kbd}`ctrl+v`     | Paste                       |
    | {kbd}`cmd+z`     | {kbd}`ctrl+z`     | Undo                        |
    | {kbd}`cmd+enter` | {kbd}`ctrl+enter` | Run a query                 |
    | {kbd}`cmd+/`     | {kbd}`ctrl+/`     | Comment or uncomment a line |
    ```
  </tab-item>
</tab-set>


## Available keys

The `{kbd}` role recognizes a set of special keywords for modifier, navigation, and function keys. Any other text will be rendered as a literal key.
Here is the full list of available keywords:

| Syntax             | Rendered Output      |
|--------------------|----------------------|
| `{kbd}`shift``     | <kbd>Shift</kbd>     |
| `{kbd}`ctrl``      | <kbd>Ctrl</kbd>      |
| `{kbd}`alt``       | <kbd>Alt</kbd>       |
| `{kbd}`option``    | <kbd>Opt</kbd>       |
| `{kbd}`cmd``       | <kbd>Cmd</kbd>       |
| `{kbd}`win``       | <kbd>Win</kbd>       |
| `{kbd}`up``        | <kbd>Up</kbd>        |
| `{kbd}`down``      | <kbd>Down</kbd>      |
| `{kbd}`left``      | <kbd>Left</kbd>      |
| `{kbd}`right``     | <kbd>Right</kbd>     |
| `{kbd}`space``     | <kbd>Space</kbd>     |
| `{kbd}`tab``       | <kbd>Tab</kbd>       |
| `{kbd}`enter``     | <kbd>Enter</kbd>     |
| `{kbd}`esc``       | <kbd>Esc</kbd>       |
| `{kbd}`backspace`` | <kbd>Backspace</kbd> |
| `{kbd}`del``       | <kbd>Del</kbd>       |
| `{kbd}`ins``       | <kbd>Ins</kbd>       |
| `{kbd}`pageup``    | <kbd>PageUp</kbd>    |
| `{kbd}`pagedown``  | <kbd>PageDown</kbd>  |
| `{kbd}`home``      | <kbd>Home</kbd>      |
| `{kbd}`end``       | <kbd>End</kbd>       |
| `{kbd}`f1``        | <kbd>F1</kbd>        |
| `{kbd}`f2``        | <kbd>F2</kbd>        |
| `{kbd}`f3``        | <kbd>F3</kbd>        |
| `{kbd}`f4``        | <kbd>F4</kbd>        |
| `{kbd}`f5``        | <kbd>F5</kbd>        |
| `{kbd}`f6``        | <kbd>F6</kbd>        |
| `{kbd}`f7``        | <kbd>F7</kbd>        |
| `{kbd}`f8``        | <kbd>F8</kbd>        |
| `{kbd}`f9``        | <kbd>F9</kbd>        |
| `{kbd}`f10``       | <kbd>F10</kbd>       |
| `{kbd}`f11``       | <kbd>F11</kbd>       |
| `{kbd}`f12``       | <kbd>F12</kbd>       |
| `{kbd}`plus``      | <kbd>+</kbd>         |
| `{kbd}`fn``        | <kbd>Fn</kbd>        |
| `{kbd}`pipe``      | <kbd>|</kbd>         |