| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|
Description
A component that allows Buttons allow the user to trigger perform a "flow defined single action" (e.g. Apply, Continue, Expand) in context to a container its located in (e.g. , such as navigating to a different view, choosing an option, or completing a task. These actions are always in context, relating to a container it's located in, such as a screen, form, wizard, popup, popover, etc...).
There are 5 button types defined here.
 |
Example for of a table with a row of buttons from of different types (icon, Icon + name, split) at the top.
 |
Types
 | Used for either main or secondary actions on the page/pane/dialog | |
 | Used for toolbars and displays where words won’t comfortably fit alongside icons. | |
 | Used when there are several possible related actions, and one main 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). | |
 | Used Use to quickly switch between two possible (e.g. ON/OFF) | |
Ribbon buttons |  | Used in the ribbon pattern. see Ribbon button. |
Usage & Behavior
...
binary options, e.g. On/Off. | ||
| Use within the Ribbon component. |
Usage & Behavior
General guidelines
Structure
A button consists of:
A trigger area. When selected, this performs an action.
A label. This can be text, an icon, or both.
These elements appear differently depending on the button type.
Placement and Positioning
According to button type.
Content
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 capitalization.
For Sets groups of Buttonsbuttons, use specific labels describing the actions, such as Save or Discard, instead of using rather than general terms such as OK and Cancel. This is particularly helpful when the user is confirming an action.
Responsiveness
According to button type
...
Labels should be short and meaningful. Try not to use more than 3 words.
Internal logic
According to button type.
States
According to button type.
Interaction (general for all buttons)
...
When hovering, Mouse cursor change from pointer
...
Clicking (pressing and releasing the left mouse button) on the button the button’s target area , will initiate its action
 | When hovering, the mouse cursor changes from a pointer… |
 | … to a hand. |
Validations and errors
See more specific details according According to button type.
For more further 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 3 words for button labels.
Choose
a button text that islabels which are short and meaningful.
Avoid acronym using acronyms as labels in buttons. Use language which the user will understand.
Accessibility compliance
Focus management
See general guidelines described in Follow the Accessibility guidelines, especially:
Screen reader support
...
Contrast & size compliance
...
Design
According to button type.
Code
According to button type.
Femi please remove the code section here
...