Modal button positioning on mobile

by Emily Lawes   Last Updated August 14, 2019 14:16 PM

I am designing a design system for my company and am currently looking at designing the modals and dialogues for both desktop(tablet too) and mobile.

I have placed the primary action to the bottom right of the modal and any secondary actions, such as cancel or 'save draft' on the left. This just uses CSS floats.

Large modal design

However on mobile, I am not sure how to position the buttons if there is more than two. If there was just cancel and submit, either this would fit on the one line depending on screen size, or they would stack (I just need to update the CSS to allow this to happen) ontop of each other which also should work fine for the user.

However if there is more than 2, the order if they all stack will not particularly be intuitive for the user.

Small modal design

ignore the glitchiness - I can fix this just with a bit of CSS but I wanted to get opinions of others who have maybe designed something similar.

Stacking them like -

Cancel

SaveDraft

Submit

Wouldn't particularly make sense, but nor would

CancelSave Draft

Submit

I would really appreciate any help to let me know of common patterns here?

Thanks so much



Related Questions


Are modal dialogs WCAG compliant?

Updated September 28, 2016 09:06 AM

Pane vs Modal vs ?: Across all screen sizes

Updated July 26, 2019 16:16 PM

Display Modal over another Modal, it's really a sin?

Updated August 09, 2018 22:16 PM

Modal Window with Tab Menu font sizes (Prominence)

Updated September 20, 2017 18:16 PM