Use a button to invoke an immediate action:
![]() |
Use a link instead if: The action takes the user to another page of the same dialog or an external source like documentation. |
![]() |
Use a toolbar button instead if there are several buttons related to a table or list. |
![]() |
Use a split button instead if: |
![]() |
Use a built-in button instead if it's related to an input field, combo box, search field. |
Use an action name as a button label.
Use title capitalization for button labels.
Write the label as an imperative verb, for example, Save, Print, Cancel. Use title capitalization.
Exceptions: standard buttons like
The button should answer the question in the title, so the user can skip the description. Prefer specific labels over generic ones:
Do not
use the word
![]() |
![]() |
The label should be short, not more than five words. If it’s not obvious what element the button is related to, add more words to make it clear. Prefer clear labels to short ones:
![]() |
![]() |
All buttons can get focus, even on macOS if the
A focused button is invoked by pressing
Make the second most popular button in the dialog focused. It’s recommended to have one default and one focused button so that most of the actions can be triggered using the keyboard.
It’s recommended to have one default and one focused button so that most of the actions can be triggered using the keyboard.
On pressing the
If the focus moves to the control that’s not a button, the original default button is triggered by
Disable a button if:
Other standard buttons are described below. They can be regular or default buttons.
On hovering over a button, show a tooltip with the shortcut and the action name if it can be clarified. For more details, see Context help.
If the action is clear, show the shortcut only. If the action can be clarified, show the action name and the shortcut:
![]() |
Use the The |
![]() |
The If a confirmation button is present in a dialog, for example,
If it is not clear what will happen on clicking the |
![]() |
Use the
|
![]() |
The help button appears in the bottom-left corner of a dialog and opens a documentation website. Add this button if the dialog's functionality is described in documentation. |