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 -




Wouldn't particularly make sense, but nor would

CancelSave Draft


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

Thanks so much

  • Sorry, I am a bit too late to the conversation. But I was wondering what is the difference between "Cancel" and the "Close" button? Because as I see, you need "Submit" and "Save for Later" buttons. Cancel and Close should do the same thing, right? – jitendragarg Aug 21 '19 at 10:38

Submit it is the most important button in your form, so you can make it full width on the second row. The other buttons can have 50% width, on the first row. You can check this approach in the Material Design Guidelines:

enter image description here

enter image description here

  • If submit is the most important button, why not place it above the other buttons? – jazZRo Aug 15 '19 at 10:34
  • It is the logical order of the actions... The submit button is the final action in this form. Also, don't you think it is more visible on the bottom? – Madalina Taina Aug 15 '19 at 10:39
  • It depends I guess... When the form is longer and you have to scroll, the submit button won't be visible first. But that was just a thought, you might as well be right. – jazZRo Aug 15 '19 at 15:00

You can remove "Cancel" button. Being a smaller ui on mobile, users can spot close (X) button for the same action.


You could add a dropdown button with both actions instead of two separated buttons.

For example:

enter image description here

  • 1
    The dropdown button has some issues: It hides the other option(s) and it is very small. It can be tricky to touch (sitting in a bus on a bumpy road) and the submit button could be easily hit by mistake. It would be less impactful if it was the "Save draft" button that is mistakenly touched, but that doesn't solve neither problem. – jazZRo Aug 15 '19 at 10:30
  • Ty for your advice, @jazZRo! – takedafront Aug 15 '19 at 12:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.