Docs
Kbd
Last modified on June 20, 2025 • 2 min read • 267 wordsUse 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:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| class | string | Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. | ||
| color | select | Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary]. |
||
| text | string, template.HTML, hstring.RenderedString, hstring.HTML | v1.0.0 Text to render by the element. | ||
| title | select |
v1.0.0
Use text instead. Title of the keyboard input. In shorthand notation, this is the first (and only) matched argument. |
| Name | Type | Required | Default |
|---|---|---|---|
| class | string | ||
| Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. | |||
| color | select | ||
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary]. |
|||
| text | string, template.HTML, hstring.RenderedString, hstring.HTML | ||
| v1.0.0 Text to render by the element. | |||
| title | select | ||
v1.0.0
Use text instead. Title of the keyboard input. In shorthand notation, this is the first (and only) matched argument. |
|||
Examples
Set a background color with contrasting foreground color with the color argument.
primary
secondary
success
danger
warning
info
light
dark
markdown
{{< kbd text="primary" color="primary" >}}
{{< kbd text="secondary" color="secondary" >}}
{{< kbd text="success" color="success" >}}
{{< kbd text="danger" color="danger" >}}
{{< kbd text="warning" color="warning" >}}
{{< kbd text="info" color="info" >}}
{{< kbd text="light" color="light" >}}
{{< kbd text="dark" color="dark" >}}