Description
ONGOING
A component that allows the user to trigger a "flow defined single action" (e.g. Apply, Continue, Expand) in context to a container its located in (e.g. screen, form, wizard, popup, popover, etc...).
Example for a table with a row of buttons from different types (icon, Icon + name, split) at the top
Types
Type | Usage |
|---|---|
Primary Regular and emphasised  | Used for either main or secondary actions on the page/pane/dialog |
 | Buttons used in buttons to better communicate what the button does.
|
 | Used when there are several possible actions related but only one Enter action (e.g most frequent used). |
Toggle  | Used to quickly switch between two possible (e.g. ON/OFF for advanced mode) |
Ribbon | Used in the ribbon pattern. see <<TBD link to pattern>> |
Usage & Behavior
Some examples include Add, Save, Delete, Cancel.
Each pane or popup can have one Enter button
Any remaining calls-to-action are represented as secondary buttons
General guidelines
Labels
Button labels tell users what will happen when they click the button.
Use verbs that describe the action, such as Add or Delete. Use sentence-style capitalisation.
For Sets of Buttons, use specific labels, such as Save or Discard, instead of using OK and Cancel. This is particularly helpful when the user is confirming an action.
Responssiveness
According to button type
Positioning
See by specific type
States
Buttons states are described according to button type
Interaction (general for all buttons)
When hovering, Mouse cursor change
from pointer
To Hand
Clicking (pressing and releasing the left mouse button) on the button target area, will initiate its action
If a user clicked (but didn't release) on a button and moved the mouse cursor:
Out of the target area and released the mouse button- the action will not be initiated
Out of the target area. Moved it back in the target area and released the mouse button - the action will be initiated
Validations and errors
See more specific details according to button type
For more information see /wiki/spaces/ENG/pages/33555837
Transitions
According to button type
Best practices
Do not use Buttons as navigational elements. Instead, use Links.
In most cases, do not use more than three words for button labels.
Choose a button text that is short and meaningful.
Avoid acronym as labels in buttons.
Accessibility compliance
Focus management
Set in the general guidelines described in /wiki/spaces/UX/pages/308969693
Screen reader support
Set in the general guidelines described in /wiki/spaces/UX/pages/308248620
Contrast & size compliance
Are taken into consideration and embedded in the specific visual design
Design
According to button type
Code
Related