What is better position to display primary & secondary button in pop up?


download bmml source – Wireframes created with Balsamiq Mockups



In your example there are no primary and secondary actions. Both are primary actions but are affirmative and dismissive. If you want to follow Material design guidelines then place the affirmative on the right and the dismissive on the left.


Dialogs present a focused and limited set of actions, which are generally affirmative or dismissive.

  • Affirmative actions are placed on the right side and continue the process. Affirmative actions may be destructive, like “Delete” or “Remove.”
  • Dismissive actions are placed directly to the left of affirmative actions and return the user to the originating screen or step in the process.
  • Dismissive and affirmative action text can be “Cancel”/”OK” or specific active verbs or verb phrases that indicate the outcome of the decision.

enter image description here


If you using this pop up then first approach is preferred and if you want to go for web or desktop based application then use second approach placed on the right side. The reason is in mobile people generally tap on the screen with right-hand side fingers or thumb so it would easy for them to select immediately. People prefer to click first on right so always positive action or in which app want to confirmation from the user, "SUBMIT" button used at right side.

In web or desktop based application, center point is considered. So if you have observed then when you get any pop up or notification or alert always buttons named as "yes" or "ok" or "confirm" placed at left of the screen.


As per my understanding, the button placement should be based on the importance of the action.

For example, if it is an action like a bank traction or giving access to sensitive information which needs utmost attention from the user the affirmative button should be on the left side. The user tends to use the button on the right side as it is accessible very quickly. Both in mobile and web the right side is more easily accessible to 90% of the people in the world who are right-handers. If accidentally pressed the button on the right side it is the dismissive action button so the action will not have any impact on the user, they can start the process again.

As far as the information is not very sensitive the affirmation button can be on the right side as it is very well accessible.


I think this is the same situation as in any alert/ modal with "ok" / "cancel" buttons.

Here is a detailed article that explains why "ok" / "submit" buttons should be placed on the right: Why ‘Ok’ Buttons in Dialog Boxes Work Best on the Right.

On Material design you can see the same approach: Dialogs. enter image description here

Your Answer

