What's the rule for full-width buttons for apps?

I’m curious to know the rule for full-width buttons in regards to padding? There’s a lot of videos for regular large and small buttons but hardly anything for full-width buttons. Should full-width buttons have consistent padding or should full-width buttons all be the same size ( same button width) with different padding? The app I’m designing will have a lot of full-width buttons with information ( numbers, etc.) and if all full-width buttons have consistent padding then all the buttons will be different button sizes. Which way is correct?

I’m a little confused by your question. To me a full-width button is a button that always takes up 100% of the width of its parent container. If the button is in a 320px wide container that has no padding, the button will be 320px wide. For full-width buttons, padding + content is not what defines the width of the button. In Figma this is the difference between setting an auto layout frame to horizontally hug contents vs. setting it to fixed width. The padding values you’d set in CSS are the same in both cases even if the width of the buttons are different. If an engineer sets the button width to 100% the button will take up 100% of the width of its parent container regardless of the padding they set on the button itself.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.