Hit Areas
Targets should be bigger than they look.
Fitts's Law: the time to hit a target is a function of its size and distance. A 16px icon button is fast to see but slow to hit — visually right, ergonomically wrong.
The trick is to decouple the two: draw 16px, accept clicks on 40px.
These 16px icons carry 40px hit areas — click around the glyphs and they still respond. Fitts's Law: bigger targets are faster to hit.
The technique
Extend the target with a pseudo-element — the glyph stays small, the clickable area doesn't:
.icon-button {
position: relative;
}
.icon-button::before {
content: "";
position: absolute;
inset: -12px; /* 16px glyph, 40px target */
}
Apple's guideline is 44pt minimum; Android says 48dp. On the web we routinely ship 20px targets and blame users for missing them.
Concentric, not nested
When two adjacent controls both need extended areas, keep the extensions as siblings rather than nesting buttons (invalid HTML) — the Next.js DevTools team calls these concentric hit areas. And where the layout gives you free room — a screen edge, a corner — let the target run all the way into it: edges are infinitely wide targets.