3

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

Improve this question
1
  • 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, 2019 at 10:38

3 Answers 3

Reset to default
3

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

Improve this answer
3
  • If submit is the most important button, why not place it above the other buttons?
    – jazZRo
    Aug 15, 2019 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, 2019 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, 2019 at 15:00
1

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

Improve this answer
1

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

For example:

enter image description here

Improve this answer
2
  • 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, 2019 at 10:30
  • Ty for your advice, @jazZRo!
    – takedafront
    Aug 15, 2019 at 12:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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