Description
ONGOING
A component which 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
Buttons differ from links in this regard, because links navigate the user to a new state in the application but never initialize any actions.
Types
Type | Usage |
|---|---|
Primary / Secondary / 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 primary 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 primary 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
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.
Do not use Buttons as navigational elements. Instead, use Links.
Accessibility compliance
Focus management
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
Contrast & size compliance
<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>
Design
According to button type
Code
Related