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. |
The label displays the action the button performs.
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
|
![]() |
Use the
Do not add an icon to the button. The main purpose of an icon is to quickly find a familiar action in a packed toolbar or menu. Usually, no more than 3 buttons are placed nearby, their labels can be scanned quickly, and icons are not required. |
![]() |
The help button appears in the bottom-left corner of a dialog and shows help in a tooltip on hover, or opens a help dialog when clicking it. For more details, see Context help. |