What is the best practice for a UI, to make all the similar buttons with a fixed width, no matter how long is the text (with the condition to fit) or make the width proportional with the text and add the same padding?

enter image description here


Please check also this example on Material Design Guidelines that suggest a minimum width and flexible width.

enter image description here

Dialog buttons Button height: 36dp Button top margin: 24dp Button padding: 8dp Button alignment: Right edge for LTR scripts Button width: Varies based on button text length

enter image description here

It is this a general rule?

  • Does your app/site need to be translatable? Different languages mean different word lengths so that would play into making the lengths proportional. – kerr Nov 16 '17 at 22:57

In my opinion, if the buttons are one over the other then try to adapt the shorter to have the wider's width. In your example it would be the green option, but giving less padding to the "Subscribe" button.

If the buttons are horizontal there is no need to give them the same width.

enter image description here

  • 1
    It is an interesting approach, but if there are multiple buttons and maybe in a page of a website it doesn't appear the button with the widest width, it is basically the first option. Anyway, like I said, interesting point of view. Did you find any research on this? – Madalina Taina Feb 5 '17 at 10:43
  • 1
    Sorry, I didn't check any research. Well I mean if the buttons are one over the other (if they are in different parts of the page it doesn't apply) and always with certain limits. If a button is too wide vs a too short then I would leave them as they are or try to make the widest be double width of the short one, if possible. – Alvaro Feb 5 '17 at 10:52

I think fixed width is better option because it gives visual balance to the screen. Different size also sometimes used to give emphasis, for ex- it might be possible that buttons at the same level but the button with bigger size is getting more attention.

  • Thank you for your answer. @alvaro suggested also buttons with the same width, but your explanation is something extra. Do you have any research on this? – Madalina Taina Feb 7 '17 at 4:44

After I made research multiple times on this issue, I didn't find a good reason to believe that buttons with the same width help the user in any way, influence less the decision or improve accessibility. Instead, I think we shouldn't ignore the recommendation from Material Design Guidance that suggests a preferred height, but not a fixed width: "Accessibility

To ensure usability for people with disabilities, give buttons a height of 36dp and give touchable targets a minimum height of 48dp."

enter image description here


Fixing the width for buttons will give a coherent aspect to the interface. Yet, it has the risk of not being able to handle further buttons with perhaps longer labels. This reason makes it incompatible with a fixed guideline.

You can always emphasise one particular button by playing on size, colour and padding.


Madalina, a general minimum width for buttons, as stated in the Material Design Guidelines, is important, because it ensures that all buttons are reasonably easy to click or tap even for very short labels such as OK. Think "Fitts's Law."

And while same-width buttons may look more aesthetically pleasing, I've yet to see research that shows any usability benefits for using them.

  • Can you refer to the relevant section in the Material Design Guidelines that has recommended minimum width? I saw only a reference for a minimum height. – Madalina Taina Jul 9 '19 at 12:51
  • 1
    The images in the Specs section way down on the Buttons page indicate a minimum button width of 64dp. – JochenW Jul 10 '19 at 4:51

In the design system that I've created for my company, I combined both types. Fixed-sized buttons better use for modal windows and pop-ups. That's more aesthetical and usual for users and pretend to be as "design pattern". So fixed-sized everywhere when we have 2 or a group of buttons. The width, in this case, is calculated by the longest possible text label. In all other cases, I use buttons with paddings, e.g. 16px+TextLabel+16px.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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