I'm designing a modal popup which consists of a form where the user can fill a textarea with a comment, and a set of buttons that represent the primary and secondary actions the user can take.

A commonly used pattern for this scenario is to visually distinguish primary and secondary actions, as in http://www.lukew.com/ff/entry.asp?571. However, all the examples I've seen only have a single primary action, and a single secondary action, typically Submit/Save and Close. In my particular case, however, I have multiple primary actions (Approve and Reject) that allow a given workflow to resume, and a single secondary action (Close) which essentially closes the modal popup.

How'd you adapt this pattern for this setting? My first thought was to turn both "Approve" and "Reject" into primary actions, and "Close" secondary. Another alternative, is to turn the "Cancel" button into a primary action, leaving the remaining two as secondary; this way, we'd still have a single primary action, which is the most prominent button in the page, though it'd have a rather odd "primary" action as a consequence.

3 Answers 3


I would use different visual indicators, and a secondary, like so:


download bmml source – Wireframes created with Balsamiq Mockups

The important thing is how often users will be selecting the actions... if they will 'Accept' 90% of the time, Reject 9%, and cancel 1%, then it's likely Accept should be larger/easier to hit than Reject, as shown above. If the ratio is more even, then you would keep them both the same size.

  • @ReneeGrebe Good point on color blind, and I would even consider showing an 'x' or a checkmark as part of the button text. If you put this into an answer, I would indeed +1 it Commented May 1, 2012 at 7:07
  • 1
    Thank you very much for your feedback Myrddin. I have a follow-up question, though. These indicators work particularly well for this scenario where we have two primary actions that are commonly associated with green and red. But suppose that instead of two actions, you have three, and they do not have any association to colors (e.g. "Resend", "Reschedule", and "Escalate"). One strategy would be to follow your design, but instead of using two different colors for the primary buttons, use a neutral color for all of them, since they have equal chance of being chosen. What do you think?
    – John Silva
    Commented May 1, 2012 at 11:18
  • @user12999 done! :) Commented May 1, 2012 at 15:09
  • @ReneeGrebe I updated my answer to incorporate icons. I couldn't really think of a good alternate color than red for 'Reject', but that's quite dependent on the color scheme of the entire application anyway. Commented May 1, 2012 at 21:23
  • Yes, I have a follow-up question as well. [Cancel] [Save] [Save & Print]. [Cancel] is a secondary button. Can there be two primary buttons - [Save] [Save & Print]?
    – essdeepee
    Commented Dec 30, 2015 at 11:10

I like Myrddin's suggestion a lot and think the concept works. Another option, to get away from red/green (which can look the same to some color blind users]) and use a green check icon in conjunction with "Accept" and a red x icon in conjunction with "Reject". If the icons are different colors that's a good visual cue to those that can see it, but the shapes are also generally recognizable without having to read the words with it - a quick visual cue to help me know the goal of the modal.


i like Myrddin's suggestion as well. and although I dont think the community has definitevly put the 2 primary buttons / 1 secondary link issue to rest (i know my org hasnt), i definitely would not recommend swapping primary and secondary actions to shoehorn this concention into your design. A primary action in a particular use case is always the primary action. It is not subject to design considerations such as placement or visual treatment of buttons.

Your Answer

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

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