Submit Buttons on the Left or the Right?

  • We have been puzzling over where to put the submit button, on the left or the right. In researching, we noticed that many sites put buttons on the bottom right in dialogue boxes, and on the bottom left in forms.

    It makes sense: in a dialogue box it seems to denote finality, being in the endpoint of the window for left–right readers; in a form, the bottom right could be in a different position relative to the rest of the form if the window is resized.

    It seems to be a convention, but I don't see anyone talking about this specific phenomenon in the following questions, nor the articles referenced therein:

    Should the OK/Cancel buttons be aligned right or centered?

    OK/Cancel on left/right?

    So, is this level of button position optimization worth it if it creates an inconsistency in button placement? Is this a good way to go?

    I'm hearing a consensus among answers that "be consistent" is paramount. Have you encountered sites that use the split approach that Facebook utilizes? The Facebook experience feels consistent to me, even though they follow two approaches depending on the context. So, is Facebook breaking or following this rule, and does it feel like a good experience to you?

    And since the left/right debate has happened in a number of links above, I'd rather focus on the precise question of a split or hybrid approach such as Facebook's.

  • Taj Moore

    Taj Moore Correct answer

    10 years ago

    We decided that in order to meet user expectations, it was best to put the button in the place that users expect to find it in the context of the form or dialogue they are using and with regard to the window size.

    Forms tend to be left justified while the browser window can leave a ton of white space to fill up a large monitor (especially in full-screen mode). Since the users' eyes never leave the left portion of the window, we place the button on the bottom left. This is especially important for forms that use the field name above the field, with most fields lying flush left on the form (as opposed to fields to the right of their names).

    Small Dialogue & Modal Windows are fixed width and tend to be small. Most contain simple phrases or questions, read right to left: having a button on the bottom right feels like both the most progressive position and the final resting place for the eye. Were the modal window large enough to contain a long form, we would probably follow the first principal for forms.

    In the end, our heuristic is this:

    1. Large Windows & Forms get the button on the bottom left.
    2. Small Windows & Dialogues get the button on the bottom right.

    Note the buttons on

    • Post Your Answer button at the bottom-left of the longer form

    • Add Comment button to the right of a small field

    Update 2015-2-26

    With mobile-first responsive being the new law of the land, the button placement varies even more based on context and user expectation. Sometimes, it's in the middle, too!

    We're now starting to just put buttons on the left for even small forms if they're inline … and more forms are showing up inline through javascript.

    If you have a primary action and cancel action are they always displayed in the same order? I seem to prefer having the primary on the left when the buttons are on the bottom left and the primary on the right when the buttons are on the bottom right, but I don't like the inconsistency and I'm not sure if this is going to freak users out.

    My advice: be consistent internally in your user experience. So, your preference sounds fine to me, as long as you keep that logic throughout. The rule there would be "primary action on the edge, secondary on the inside." And if you put the primary action in the middle (common now on mobile) or even edge-to-edge, secondary action would go below (rather the inverse of the first rule). In a grand sense, the rules are arbitrary, but inside your designed experience, they become the laws of the land. And, as styles change, so do user expectations: pay attention and know when it's time to adapt.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM

Tags used