Hugging content and filling the container mean different things

What it is

Button width has two lawful strategies. Hug content (intrinsic width) lets the box follow the words: short actions stay short, long ones grow, like a key wrapped around that sentence. Fill container lets the button eat the column; type sits in the middle, like the owner of that band. They mean different things: hug says “I am this phrase”; fill says “I am the primary of this region.” Mixing them promotes a secondary into a primary, or shrinks a primary into a sidenote.

Why it happens

Width is visual mass. A filled block that owns the column is taken by attention and by the thumb as this screen’s recommendation; a hugging key has the mass of those few words, which fits a toolbar or a dialog’s secondary. People also read a width gap as hierarchy: side by side, the longer one looks primary. If Cancel fills and Submit hugs, hierarchy inverts. Hug grows with translation and may shove a neighbor; fill is translation-stable, but a short verb in a large slab looks like a slogan rather than an action. Choosing width is choosing the control’s role in the layout, not which is prettier.

Studying it

Use both width strategies on the same dialog. Measure which control is taken as primary, and whether a long translation blows the layout.

Independent variables: whether primary/secondary fill, string length, container width. Dependent variables: first click, “which does the system want,” overflow under long copy.

Do not ask what looks nicer. Ask whether role was spoken by width.

Where it stops holding

Equal-width buttons in a card grid are a third case: width follows the card, not the copy, and does not claim page-level primacy—they are cells. Inline table actions almost must hug; filling makes the whole row clickable and misses soar. A marketing landing’s large slab is using fill as conversion; that role is primary, so a second equally filled secondary should not sit beside it.

Applying it

• Fill only a page-level or column-level primary. Toolbars, dialog secondaries, and inline actions hug content.
• When primary and secondary sit in a row, do not fill both, and do not let the secondary be wider.
• Check hug under the longest locale so Cancel is not shoved off.
• Verify on a greyscale screenshot: “who owns this band?” If the answer is the secondary, width semantics have flipped.

Related

• Within the group: E1.15.2 Overlong copy in a fixed-width button truncates or wraps · E1.15.3 A mobile primary often fills the width to make reaching easier · E1.15.4 Buttons in one group need visually aligned widths
• Adjacent: E1.01 Button hierarchy · E1.06 Button labels · F2 Layout systems
• Search terms: intrinsic width · fill container · button width