...
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..
...
Types
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 /wiki/spaces/UserExp/pages/1390479038 component. |
Usage & Behavior
General guidelines
...
As per each individual button type.
Button menus
For large button menus, :
up to 3 primary actions should be shown at top level.
...
additional, secondary buttons should be grouped within a
...
contextual Action Menu, shown to the right of the primary buttons.
...
Content
Button labels tell users what will happen when they click the button.
...
Clicking the button target area will initiate its action.
When hovering, the mouse cursor changes from a pointer to a hand.
...
Where tooltips are needed please refer to Tooltips
Validations and errors
According to button type.
For further information, see /wiki/spaces/ENG/pages/33555837.
...
where the width of the container is reduced and the 3 primary buttons cannot all be shown, they should be moved into a hamburger an Action menu along with the other secondary buttons.
the most important primary action, such as Save, should always remain visible.
...