Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • 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 are used for actions "Submit", "Next", "Previous", "Cancel", "Find"

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

...