Kbd

Share via

Use the kbd shortcode to show a keyboard input element.

Overview

Use the kbd shortcode to show a keyboard input element. As an example, the following shortcodes shows a simple CTRL-C command.

CTRL-C
markdown
{{< kbd "CTRL-C" >}}

Arguments

The shortcode supports the following arguments:

ArgumentRequiredDescription
titleYesRequired title of the keyboard input. In shorthand notation, this is the first (and only) matched argument.
classNoOptional class attributes of the keyboard input element.
colorNoOptional theme color of the element, either “primary”, “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, “white”, or “black”. By default, no theme color is used.

Examples

Set a background color with contrasting foreground color with the color argument.

primary secondary success danger warning info light dark
markdown
{{< kbd title="primary" color="primary" >}}
{{< kbd title="secondary" color="secondary" >}}
{{< kbd title="success" color="success" >}}
{{< kbd title="danger" color="danger" >}}
{{< kbd title="warning" color="warning" >}}
{{< kbd title="info" color="info" >}}
{{< kbd title="light" color="light" >}}
{{< kbd title="dark" color="dark" >}}
Last updated: September 2, 2023 • Update references to release v0.19.0 (2487fd0)