A text button’s hit region needs an explicit expansion
Aliases: ghost button hit · unlabeled padding · ink-box hit
What it is
A text button has no filled block; its visual edge is the ink of a few glyphs. Browsers and many tools default the hit region to that ink’s bounding box: height follows type size, width follows character count. Chinese 取消 may be a 32×16 tappable rectangle. The hit region has to be expanded explicitly—padding, min width and height—rather than hoping the words will grow to a hittable size. A filled primary already brings area for free; a text button does not.
Why it happens
A glyph box is right for reading and too small for a finger. Ascenders and descenders also make the box jump by letter and by language: Cancel has a y, OK does not, so two text buttons in a row have unequal hot heights. People aim at “near those words,” not at ink pixels. If hit is flush to ink, a tap in the blank above the glyphs—still apparently in the button row—misses. This is sharp on mobile: a text Cancel at the bottom of a dialog is reached by a thumb coming from below, so landings sit low, just outside a short box. Expansion is not decoration. It is motor width for a trigger that has no fill.
Studying it
Compare three text buttons: hit = ink box, hit = ink plus fixed padding, hit = platform-minimum square. The task is a fast Cancel, starting in the lower half of the screen.
Independent variables: explicit expansion, character count (OK vs Not now), language (descenders or not). Dependent variables: miss rate, landing offset relative to the ink box, success gap between two different-length labels.
An instruction to “hit the center of the word” artificially lowers misses. Instruct “hit Cancel” and let natural aiming show how the ink-box strategy fails.
Where it stops holding
A real in-paragraph link must follow the text; too much expansion swallows the next line or the next word. That is a link, not a text button. A text button in a table cell that expands past the cell will hit the next row. In a very tight toolbar, expansion may immediately overlap a neighbor; switch to an icon button with an accessible name rather than dropping expansion. On a precise desktop pointer, misses drop, but the keyboard focus ring should still follow the expanded box, or the ring will look smaller than the hittable area and appear misaligned.
Applying it
- Give text buttons a stated minimum height and horizontal padding; do not let line-height coincidentally equal the type size.
- Use the same outer-box height for text buttons in one row, so Cancel is not harder to hit than Not now.
- Turn on hit visualization on device and confirm a ring outside the ink still belongs to the button.
- Verify by rapidly tapping the blank above and below Cancel at the bottom of a dialog. If only ink fires, expansion did not happen.