UI Macro Styles

Asciidoctor supports three UI element representations out of the box, which are made from corresponding inline UI macros.

  • button (btn macro)

  • keybinding (kbd macro)

  • menu (menu macro)

The UI elements are output using semantic HTML elements, so they inherit some default styling from the browser. However, to look proper, they require some additional styling.


A button is meant to represent an on-screen button (btn:[Save]). However, it should not appear like an actual button as that could confuse the reader into thinking it’s interactive. Therefore, a button is rendered as a bold text by default:

<b class="button">Save</b>

Traditionally, a button reference is styled by surrounding the text with square brackets, as shown here:



A keybinding can be a single key (kbd:[F11]) or a sequence of keys (+Ctrl+F). Here’s the HTML that’s generated for these two forms.

<span class="keyseq"><kbd>Ctrl</kbd>+<kbd>F</kbd></span>

Here’s how these might appear:


A menu can be a top-level menu reference (menu:File[]) or a nested selection (menu:File[Save]). Here’s the HTML that’s generated for these two forms.

<b class="menuref">File</b>
<span class="menuseq"><b class="menu">File</b>&#160;<b class="caret">&#8250;</b> <b class="menuitem">Save</b></span>

This might be rendered as:


File  Save

The default styling applied to a menu reference is usually sufficient.