Add Best Practice to Buttons

Background

Button page on Web Design System does not contain any best practice around use of buttons. Adding guidelines will help solidify the standards, both for design and development as well as to help clients understand design decisions.

Relevant data

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 version

• Secondary 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.

Common Names

• Search

• Find Location

• Next / Continue

• Back / Previous

• Submit {Noun} 

Using Primary Button

• 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 Actions (submit/save/update)

Left Aligned: <button primary>Submit {{FormName}}</button>

When used within a mulistep form

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)

Left Aligned: <button default>Previous</button><button cancel>Cancel</button>

Right Aligned:<button primary>Next / Submit {{FormName}}</button>

When used with an input (Inputs + Buttons)

When a button is needed to submit a form and there is only one input field then the input field and button must be connected

If there are multiple input fields then the button and the input field must be disconnected (not touch)

Buttons versus Links

• Buttons are used for actions "Submit", "Next", "Previous", "Cancel", "Find"

• Links are used for navigation and usually appear within or following a sentence.

Icons within Buttons

• Icons within buttons should be avoided

• When icons are used, it should be combined with the button name and icons should be to the left of the name.

  

• Icons should very rarely be on their own; an exception is where space is limited and an icon is recognizable in it’s function. Screen reader only text (or an Aria-Label) must be applied.

  

Accessibility

• Buttons and Links

Options considered

Action items

Outcome