Standard button patterns for flows

In general, there are a few standard button patterns we should be using for flows:

• The Call-to-action is the bottom, rightmost button. For all steps except the final step of the flow, it should be labelled something like “Continue” or “Proceed”. It should always be disabled until the necessary inputs to proceed are entered. It is assumed that whenever a user clicks “Continue” or “Proceed” that all information entered on this screen will be saved but not submitted to the database.

  • On the final step of a flow, it should be labelled in a way that clearly indicates this is the final step, such as “Finish” or “Save”. Clicking this button submits all the relevant data from the flow to the back-end for processing.

• The secondary action is dependent on where you are in the flow:

  • On the first screen, it should be “Cancel”. Clicking “Cancel” discards the entered data and either returns the users to the screen before they initiated the flow or the homescreen, as defined in the requirements.

  • On the second through final step of the flow, the secondary action should read “Go back”. Clicking “Go Back” performs two actions:

    • Puts any inputs on the current page in the store and then…

    • Returns the user to the previous page, where all of the data entered on that page is displayed

• Optionally, there can also be a tertiary action to “Cancel” at any point in the flow. This tertiary action discards the entered data and either returns the users to the screen before they initiated the flow or the homescreen, as defined in the requirements.

In the future, we will likely implement progress bars for flows, which may modify this guidance.