Buttons allow the user to perform a defined single action, such as navigating to a different view, choosing an option, or completing a task. These actions are always in context, relating to the container it's located in, such as a screen, form, wizard, popup, popover, etc..
|
|
Type | Image | Usage |
 | Use for primary and secondary actions. | |
 | Use in areas where dialog buttons won’t comfortably fit, such as toolbars and tables. | |
 | Use when there are multiple related actions, with one primary action (e.g. the most frequently used). | |
 | Use to quickly switch between binary options, e.g. On/Off. | |
 | Use within the Ribbon component. |
A button consists of:
A trigger area. When selected, this performs an action.
A label. This can be text, an icon, or both.
For more information see button types above.
As per each individual button type.
Button labels tell users what will happen when they click the button.
Use sentence-case capitalization.
Use verbs that describe the action, such as Add or Delete.
For groups of buttons, use specific labels describing the actions, such as Save or Discard, rather than general terms such as OK and Cancel. This is particularly helpful when the user is confirming an action.
As per each individual button type.
As per each individual button type.
Clicking the button target area will initiate its action.
When hovering, the mouse cursor changes from a pointer to a hand.
 |
According to button type.
For further information, see /wiki/spaces/ENG/pages/33555837.
As per each individual button type.
Do not use Buttons as navigational elements → use Links.
In most cases, do not use more than three words for a button label.
Choose labels which are short and meaningful.
Avoid using acronyms as labels in buttons. Use language which the user will understand.
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
As per each individual button type.
As per each individual button type.