We are implementing browser based client, and we are having a little debate reg. setting width of buttons which are grouped together (either just layout wise or both layout and functionality wise). I favor setting the width same for all the button in the group, whereas my colleague prefers the width to be variable (dependent on fitting to the label of button).

My approach i.e. setting the width equal will require additional effort in case of localization.

We are using Dojo for UI.

Which approach is better ?

  • Could you please explain "a group of buttons"? I'm having reservations about the answer you have accepted.
    – dnbrv
    Mar 29, 2012 at 21:16

1 Answer 1


My recommendation would be to go with the same width for the buttons but you will need to ensure that the button sizes are chosen such that it does it doesn't seem like some buttons have too much free space and some have a very restricted free space. Here is an example of a tile layout (Metro UI style) which has captured it well

enter image description here

You could of course go for larger buttons for more text but if you are having a number of buttons together, you will have to consider the challenge of ensuring that one button doesn't stand out against the others due to its size and you will also ensure that the buttons are staggered such that sharp deviation in button sizes aren't apparent.

enter image description here

I know this is a tile layout but it does convey what I am recommending since it clearly allows different tiles sizes but distributes them in such a way that the tiles sizes differences aren't obvious

  • Thanks for reply. As I mentioned in the question, we have to support localization so string length may vary between languages, with that in mind what will you recommend ? Again thanks :-)
    – Gaurav
    Mar 29, 2012 at 8:20
  • So how much can they vary? I am not sure what all languages you are supporting but in terms of character lengths,how much will they change?
    – Mervin
    Mar 29, 2012 at 8:21
  • In terms of character length the change may not be much however I was planning to set the width to just fit to the longest string, I will have to change the width depending on language, I was planning on having different css for different languages.
    – Gaurav
    Mar 29, 2012 at 8:45
  • Well you can do that but instead of just focusing on the width,also consider using the height of the button to your advantage,this way you can have a longer string name within your button but with a lower length
    – Mervin
    Mar 29, 2012 at 8:57
  • Width is giving me enough pain as it is, height is just a can of worms I do not want to open :-)
    – Gaurav
    Mar 29, 2012 at 8:59

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.