User Interface Macros

On this page, you’ll learn:

  • How to mark up a button (press btn:[Submit]) with AsciiDoc.

  • How to mark up a keybindings (kbd:[Ctrl+Shift+N]) with AsciiDoc.

  • How to mark up a menu (menu:View[Zoom > Reset]) with AsciiDoc.

Set the experimental attribute

The attribute experimental must be set as a page attribute, component version attribute, or site attribute to enable the UI macros styles in the reference UI.

Button syntax

Communicate that a user should press a button with the button macro.

Example 1. Button UI macro
Press the btn:[Submit] button when you are finished the survey.

Select a file in the file navigator and click btn:[Open].
Result

Press the btn:[Submit] button when you are finished the survey.

Select a file in the file navigator and click btn:[Open].

Asciidoctor resources

Keybinding syntax

Create keyboard shortcuts with the keybinding macro.

Example 2. Keybinding UI macro
Press kbd:[esc] to exit insert mode.

Use the shortcut kbd:[Ctrl+T] to open a new tab in your browser.

kbd:[Ctrl+Shift+N] will open a new incognito window.
Result

Press kbd:[esc] to exit insert mode.

Use the shortcut kbd:[Ctrl+T] to open a new tab in your browser.

kbd:[Ctrl+Shift+N] will open a new incognito window.

Asciidoctor resources

Show readers how to select a menu item with the menu macro.

Example 3. Menu UI macro
To save the file, select menu:File[Save].

Select menu:View[Zoom > Reset] to reset the zoom level to the default setting.
Result

To save the file, select menu:File[Save].

Select menu:View[Zoom > Reset] to reset the zoom level to the default setting.

Asciidoctor resources