Multi-step modal footer UX

[vankhoawin]

Hi team, there's a growing amount of multi-step modals and I've seen a few ways of implementation, so I'd love to start a discussion and nip this issue in the bud before we have too many divergent patterns.

• Back and Cancel buttons in the Modal Footer: I've seen two main patterns of Modal footers for multi-step modals so far (see below screenshots).
• Adding a confirmation popover (or something along those lines) to confirm user's choice to exit a multi-step modal: related to the above bullet, I've noticed some designs have a Cancel button where I'd personally expect a Back button. Without confirmation it is easy for a user to exit out of a multi-step modal without the possibility of resuming that flow.
• Anything else? cc @andipants12 @ishah-twilio

Variation 1: Cancel button always visible, Back button included after first step

Variation 2: Cancel button visible only on first step (first screenshot), Back button visible on the other steps (second screenshot)

[ishah-twilio]

@vnguyen94 - IoT team had followed following paste component

https://paste.twilio.design/components/modal/#footer-actions-directional-alignment

It tasted very well in the usability studies for IoT Customers. Let me know if you need any specific information or how may I help.

[corinne-nagel]

Hey @vnguyen94 , thanks for calling this out. We'll work on getting alignment on this and bring it to the committee. I'll share what comes from that meeting here. Thanks again!

[vankhoawin]

Thanks! and let me know if I should be bringing these up in office hours or some other way, I saw value in it being written down.

[loreina]

Closing this discussion due to inactivity. The general recommendation would be to keep the "Back" button as a left action, and "Cancel" as a secondary button next to the primary action.