Buttons must fit their content. A button's size should not be fixed or stretched. Buttons should adapt to the text inside them.
By Pawan Nayar · from the LLOS AI Learning record
Buttons must fit their content.
A button's size should not be fixed or stretched. Buttons should adapt to the text inside them.
Buttons should only be as wide as the text they contain. Do not make buttons stretch to fill a space. Do not make buttons a fixed width. Buttons should wrap their text and add padding around it. If there are many buttons, they should appear in a row. The row should allow buttons to move to the next line if there is not enough space.
A developer creates a form with 'Save' and 'Cancel' buttons. The developer makes both buttons stretch to fill the entire width of the form. This makes the buttons look too large and out of place. Instead, the developer should make the buttons only as wide as the words 'Save' and 'Cancel', plus some space around the words.
Resolved from this lesson's own record — real definitions, not invented for this page.
More from the same record, pulled by shared topic — not written new for this page.
A button should only be as wide as its text and the space around the text. This is called content-sized.
Floating elements need a special stacking order. This order is called a stacking context.
A developer should list all elements that will be inside the card. The developer must find the longest possible text for each element from real data.
A developer must plan mobile layouts separately from desktop layouts. Decide which controls collapse or hide.
Buttons must fit their content. A button's size should not be fixed or stretched. Buttons should adapt to the text inside them.