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

 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.

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

When used within a single step form

The submit action ("Submit") should be to the left.

e.g. Form Navigation (submit)

Left Aligned: <button primary>Submit</button>

When used within a mulistep form

The forward action ("Next", "Submit") should be to the right of the backwards action ("Previous", "Cancel")

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>

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 used sparingly

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

  

Common Names

• Search

• Find Location

• Next / Continue

• Back / Previous

• Submit {Noun} 

Accessibility

• Buttons and Links

Options considered

Action items

Outcome