Buttons in one group need visually aligned widths

What it is

Buttons that appear as a set—a dialog pair, segmented actions, two secondaries in a row—need aligned widths: same height, same width, or the same grid start and end. One hugging OK into a little square and the other stretching with Not now breaks the set, and the short one is also harder to hit. Alignment is of the visual chrome, not of stretching the words to equal length.

Why it happens

Equal width reinforces “these are answers in one row.” Ragged chrome makes the short key look accessory and the long one primary, even when style hierarchy says the opposite. Equal width also helps movement: two same-size targets let the endpoint program stay symmetric, especially in a vertical stack where the thumb should not change scale. Misalignment usually comes from hug-by-default: each control follows its own string. English OK / Cancel happens to be similar; Chinese 确定 / 取消 often is too; Delete this draft / Keep splits. Alignment can mean “all equal the widest” or “split the container.” Both change per-control width semantics, which is what the set wants: group identity over per-key hug.

Studying it

Pair buttons as hug-each versus equal-to-widest versus split-container. Measure which is taken as primary, misses on the short key, whether the pair is seen as a pair.

Independent variables: alignment strategy, length gap between the two labels, row versus stack. Dependent variables: role misread, short-key misses, rated grouping.

The length gap is the stimulus. Two short words will not show why alignment pays.

Where it stops holding

When primary/secondary hierarchy is intentional, making the primary wider is width speaking; do not shrink the primary to match Cancel for “alignment”—that is a different point. A toolbar of mixed verbs should not equalize; those are not a pair. In a card grid, each card’s button should align to the card grid, not stretch copy to match other cards.

Applying it

• Dialog pairs take the widest label’s chrome, or split the footer; do not hug separately.
• Vertically stacked mobile pairs should share width; do not put a full-width on top and a short right-aligned under it.
• After aligning, still distinguish primary from secondary with style, not with width alone.
• Verify by wireframing the pair. Left and right edges of the two boxes should align. If the short label is obviously narrower and harder to hit, in-group width is not aligned.

Related

• Within the group: E1.15.1 Hugging content and filling the container mean different things · 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
• Adjacent: E1.14 Button groups and split buttons · E1.10 Button order · F2 Layout systems
• Search terms: equal width buttons · dialog footer · visual alignment