Do you know how to format UI elements in technical documentation?
Updated by Tiago Araújo [SSW] 2 months ago. See history
When writing technical instructions, it's important to distinguish UI controls, buttons, and labels from regular text to improve readability and maintain consistency.
Click Save to store your changes.
❌ Figure: Bad Example - It's not clear that "Save" is a control
Option 1: Bold
Best for UI elements like buttons, labels, or menu options.
Tip: See how to add bold in Markdown.
Click Save to store your changes.
✅ Figure: Good example - Using bold for buttons and menu options
Option 2: Quotation marks (quotes)
Best for exact texts users must enter/type; but can also used for UI elements like buttons, labels, or menu options.
Type "Admin" in the Username field.
✅ Figure: Good example - Using quotes for exact text users should type
Option 3: Code formatting
Ideal for commands, or file names.
Tip: See how to use code formatting in Markdown.
Enter the command git clone https://github.com/user/repo.git
✅ Figure: Good example - Using quotation marks for exact text users may type