I always find it fairly straightforward for me to determine when to apply stretched button that can expand its width and fills its parent container. However, it is challenging to do the same for desktop since there is a lot more space we're working with and is relatively harder to achieve a balanced visual hierarchy.

I have looked through some design systems but could not quite understand what is the "appropriate scenario" to apply such button style. Would love to know if there are any basic or recommended guidelines for best practices. Research-based materials would be a plus!

  • The way you phrased this with "stretched" and "can expand" implies that the button is changing size/shape during use. Is this a static or dynamic button? – Davbog May 2 '19 at 7:58
  • A dynamic button that adjusts based on its container width. – Aron May 2 '19 at 19:56

A full width button may be applicable for the following conditions -

  1. You do not have a very wide (100% fluid) container.
  2. The page/form elements are centre aligned.
  3. It is the only CTA button for that section.

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.