I need some help with the layout of multiple buttons/links that have to be laid out in a row.

The delete button is furthest from the others in order to avoid error, but I will have a confirmation notice.

Screenshot of buttons and links. Save Changes button, Save as New Search link and Cancel link are left-aligned in that order and Delete this Search button is right-aligned

Any ideas on how to treat these in a more elegant way?

  • 1
    Need more context. Why are there 2 levels of representation being used, 2 are just links whereas other 2 are buttons?
    – rk.
    Jun 14, 2013 at 20:50
  • Sure The buttons are used for a editing a save search. Saving the changes is the primary function of the page. In order to simplify workflow, we wanted to also offer to save the changes to the saved search as a completely separate search. Since both start with the word "save" I wanted to make the distinction really obvious. The same thinking went behind cancel and delete. I want to make them distinct enough so that it is really clear which button does what. I should probably just spend a bit more time with this, but I wanted to see if anyone could point me to a best practices doc.
    – Ana
    Jun 14, 2013 at 21:10
  • @Ana, I think you're doing quite well already. The fonts could be bigger but I'm sure that isn't really an issue. Jun 15, 2013 at 4:32
  • I also already like it as it is. I was wondering whether "Query" could be a better word than "Search" for the buttons?
    – John
    Jun 15, 2013 at 5:03
  • 3
    @Ana How does this dialog pop up? If this is a full fledged application, I am imagining 'Save' and 'Save As' functionality, which is quite standard.
    – rk.
    Jun 15, 2013 at 5:11

2 Answers 2


I wouldn't say there's anything particularly inelegant about your design. You have the right number of options, i.e. no crucial functions are omitted and no superfluous functions are present. I only recommend two changes.

1) Reverse the location of the buttons. The confirm command should be on the right because western convention dictates a top-left to bottom-right flow.

2) Make "Save Changes" blue to match the other commands on the right or possibly green if you want to make it distinct. Unless you have specific branding reasons to use orange, it isn't sufficiently different from red to justify its use.


  • 2
    I like this answer. I would also consider making the "Delete this Search" button a text link so that it does not command as much attention. You could keep the icon and invert the color.
    – Andrew
    Jul 27, 2013 at 16:10

Generally I like to order things in a hierarchical manner from right to left. Right being the CTA type action that progresses the user through whatever journey their on to the left being the most destructive e.g. cancel/delete.

[delete this search], cancel                           Save as New Search, [Save Changes]

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.