= UI Macro Styles :navtitle: UI Macros Asciidoctor supports xref:antora:asciidoc:ui-macros.adoc[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. == Button A xref:antora:asciidoc:ui-macros.adoc#button[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: [source,html] ---- <b class="button">Save</b> ---- Traditionally, a button reference is styled by surrounding the text with square brackets, as shown here: btn:[Save] == Keybinding A xref:antora:asciidoc:ui-macros.adoc#keybinding[keybinding] can be a single key (`+kbd:[F11]+`) or a sequence of keys (`+kbd:[Ctrl+F]`). Here's the HTML that's generated for these two forms. [source,html] ---- <kbd>F11</kbd> <span class="keyseq"><kbd>Ctrl</kbd>+<kbd>F</kbd></span> ---- Here's how these might appear: [%hardbreaks] kbd:[F11] kbd:[Ctrl+F] == Menu A xref:antora:asciidoc:ui-macros.adoc#menu[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. [source,html] ---- <b class="menuref">File</b> <span class="menuseq"><b class="menu">File</b> <b class="caret">›</b> <b class="menuitem">Save</b></span> ---- This might be rendered as: menu:File[] menu:File[Save] The default styling applied to a menu reference is usually sufficient.