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

New contributor
Emily Lawes is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
2

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 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 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 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.

1

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

For example:

enter image description here

New contributor
takedafront is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • 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 at 10:30
  • Ty for your advice, @jazZRo! – takedafront Aug 15 at 12:32

Your Answer

Emily Lawes is a new contributor. Be nice, and check out our Code of Conduct.

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.