diff --git a/docs/guidelines/language/menu-functions-and-ui-labels/button-labels.md b/docs/guidelines/language/menu-functions-and-ui-labels/button-labels.md new file mode 100644 index 000000000..e5bc8576c --- /dev/null +++ b/docs/guidelines/language/menu-functions-and-ui-labels/button-labels.md @@ -0,0 +1,460 @@ +--- +sidebar_position: 9 +sidebar_label: Button labels +title: 'Button labels' +doc-type: 'banner' +component-tabs: [''] +no_single_tab: true +description: 'We ensure clear, actionable button instructions by crafting effective prompts and calls to action that enhance user interaction.' +--- + +# + +## General rules + +Aim for one action per button. + +
+
+ +
+
+ +
+
+ +In limited cases, two closely related actions can be combined using "and". + +
+
+ +
+
+ +
+
+ +Don't use more than five words on one button, ideally between 1-3. + +
+
+ +
+
+ +
+
+ +Don't use 'OK' as a button label. If a legacy system requires 'OK', use all caps. + +
+
+ +
+
+ +
+
+ +Clearly state specific actions on primary buttons that will occur when clicked, rather than generic terms, such as "Submit", "OK", "Yes", "Dismiss". + +
+
+ +
+
+ +
+
+ +Ensure the button label text verb and noun match the heading verb and noun making the user's choice easier. Only leave out the noun in extremely space-constrained mobile views where the context is clear and immediate. + +
+
+ +
+
+ +
+
+ +When headings are far from the button within the UI or there are multiple steps or pages, always repeat nouns on buttons to lessen the cognitive load (even for space-constrained mobile views). + +
+
+ +
+
+ +
+
+ +Use our [UI terminology](../menu-functions-and-ui-labels/ui-terminology.md) section to clearly explain, differentiate and define what happens when buttons are activated, such as using "add" to insert items and "create" to make new items. + +
+
+ +
+
+ +
+
+ +Use sentence case for all button labels. + +
+
+ +
+
+ +
+
+ +Use direct, professional and action-oriented wording to be concise and to the point. + +
+
+ +
+
+ +
+
+ +## Buttons and punctuation + +Don't use periods (full stops) as button labels are never full sentences. + +
+
+ +
+
+ +
+
+ +Don't use exclamation marks in button labels. Instead add urgency to the messaging. + +
+
+ +
+
+ +
+
+ +Don't use question marks in button labels. Instead show the consequences of the user's actions and avoid questioning their choice. + +
+
+ +
+
+ +
+
+ +Use ellipses (…) sparingly to indicate that an action requires significant further input or a secondary step before it is performed, such as opening a file explorer or a complex configuration dialog. + +Avoid using ellipses for standard actions or simple navigation to keep the interface clean and modern. The ellipsis serves as a signal that the action is not immediate and requires the user to specify details in a new window or modal. + +Note: This is a classic desktop convention (Windows/macOS). In modern web and mobile apps, ellipses are increasingly being removed to reduce visual noise unless the action is a complex, multi-step wizard. See [Punctuation](#). We recommend' removing them in our Siemens applications. + +
+
+ +
+
+ +
+
+ +## Destructive actions + +Clearly label destructive actions on button labels. + +
+
+ +
+
+ +
+
+ +## Dropdown menu options + +Clearly state specific actions in the dropdown list, starting with an active verb. + +
+
+ +
+
+ +
+
+ +Keep dropdown list text short, ideally between 1-2 words. + +
+
+ +
+
+ +
+
+ +## Workflow and navigation buttons + +Use specific and matching verbs within workflows with a series of steps to guide users through processes. + +
+
+ +
+
+ +
+
+ +Avoid the generic "Next" button label in workflows unless there are no other alternatives. + +
+
+ +
+
+ +## Buttons and state changes + +When loading states are displayed within modal, toast or inline messages, use the same button label verb in gerund (-ing) form with an ellipsis (…). + +
+
+ +
+
+ +
+
+ +Use the same button label verb in the simple past tense in status messages within modal, toast or inline messages. + +
+
+ +
+
+ +
+
+ +## Accessibility + +Use aria-labels if the button has no visible label, e.g. icon buttons. See more information on [Text alternatives and labels](../../../guidelines/accessibility/code.md#text-alternatives-and-labels). + +
+
+ +
+
+ +Do not include the word 'button' in the aria-label. The screen reader announces the component automatically. + +
+
+ +
+
+ +Make sure that the tooltip and aria-label match. See the [Accessibility](../../accessibility/overview.md) guidelines for more details. + +
+
+ +
+
+ +## Dos and Don'ts + +
+
+ +
+
+ +
+
+ +## Related + +- [Button (Component)](../../../components/button/guide.md) +- [Forms and input fields](#) +- [Warnings](../messaging/warning-messages.mdx) +- [UI terminology](../menu-functions-and-ui-labels/ui-terminology.md) +- [External links and resources](../menu-functions-and-ui-labels/external-links-and-resources.md) +- [WCAG: Using aria-label to provide labels for objects](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA6)