Buttons Overview

Buttons are primarily used to allow users to navigate forward or back through the transactional flow.

 

They also are used as part of an html form to update information, as you would expect.

 

We use default, unstyled buttons for all buttons excep for the primary buttons. Primary buttons are defined usually as Back, Continue, Accept, or Edit.

 

For transactions, Back, Continue and Accept should be used primarily. Continue should be substituted for Next.

 

Buttons Rules

 

Back should appear to the left of Continue or Accept. The primary button (Continue or Accept) will be styled to be slightly green. See examples.

 

It is important that the primary path is the one that is first selected. Javascript may need to be used if both the Back and Accept buttons are set as Submit buttons. If only one button is set as a Submit button, then it will act as the primary button and it should work as designed. This is important because if someone is just using a keyboard, and keys in their information and clicks the ENTER key, then the primary action/primary button should be activated. (It should not take them backward).

 

There is no need for Cancel or Reset in most cases. Do not use those unless you are granted an exception. Clicking the Back button twice or three times can serve the exact same action as Cancel, and simplifies the users choice.