...
Proposed text is below:
Best Practices
Definitions
Primary Action:
Identifies the Button that the user must click to *continue* or *save* data
Typically uses the Primary Colour/theme
Destructive Action:
Identifies the Button that if the User clicked the user entered data would be deleted, reverted to a previous versionSecondary Action:
Identifies any other button that is not Primary or Destructive
Typically uses the Default Colour/theme
Naming
Buttons are an action, so always lead with a verb
To provide context, buttons should use {verb} + {noun}, example "Find Location"
Where context is clear, a single verb may be used, such as within a form, "Next" and "Previous" do not require a noun. Aria-labels may add additional context for screen readers.
Button text is written in title case.
...
There should only be at most one Primary (btn-primary) action button on a page; the goal is to guide the user to the preferred action.
Primary-Cancel should only be used to confirm a destructive action (e.g. in conjunction with the Cancel modal).All other instances of cancel/delete/remove should use the regular Cancel (btn-cancel).
Location
Modal Windows
When used within a single step form
The submit action ("Submit") should be to the left.
Located at the end of a form input
btn-lg (use large sized buttons)
e.g. Final Form Navigation Actions (submit/save/update)
Left Aligned: <button primary>Submit {{FormName}}</button>
...
The forward action ("Next", "Submit") should be to the right of the backwards action ("Previous", "Cancel")
Located at the end of a form input
btn-lg (use large sized buttons)
e.g. Form Navigation (previous/cancel, next/continue/submit)
...