Do you know how to format UI elements in technical documentation?

Updated by Tiago Araújo [SSW] 3 months ago. See history

123

<introEmbed body={<> 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

Acknowledgements

Related rules

Need help?

SSW Consulting has over 30 years of experience developing awesome software solutions.