Safe starting point
40–48 px
Button height
Applies to Mobile to large desktop
Typical visible heights. The visible button and its touch target are two different things: a button can look 40 px tall while its tappable area is larger. Target sizes come from standards and platforms, shown separately below.
- Mobile
- 40–48 px
- Tablet
- 40–48 px
- Laptop
- 40–48 pxSame as desktop
- Desktop
- 40–48 px
- Large desktop
- 40–48 pxSame as desktop
Depends on touch or pointer, density, the input height beside it. A starting point, not a correct value.
Common range 32–36 compact, 40–48 standard, 48–56 large or touch
Why?
40 px reads clearly as a button without dominating a form; 48 px is comfortable for touch.
When to deviate. Dense desktop toolbars and tables use 28 to 32, because a pointer is more precise than a finger. That is a density choice, not a lower accessibility bar: the target-size requirement applies on desktop too. Match your input height so buttons and fields sit on one line.
Common mistakes (2)
- Three or four button heights in one product.
- A button shorter than the field beside it.
Official guidanceWCAGAppleMaterialSGDS
- WCAG
The pointer target must be at least 24 by 24 CSS pixels.
WCAG 2.2, SC 2.5.8 Target Size (Minimum)(opens in a new tab)Standard requirement
Applies to all viewports · touch and pointer input
- Apple
A button needs a hit region of at least 44 × 44 pt.
Apple HIG, Buttons(opens in a new tab)Design-system convention
Applies to touch interfaces
- Material
Touch targets of at least 48 × 48 dp.
Android Accessibility Help, Touch target size (cites Material Design)(opens in a new tab)Design-system convention
Applies to touch interfaces
- SGDS
The Button page lists a 48 px height token for the default size.
SGDS, Button(opens in a new tab)Design-system convention