Updated
Touch target
A touch target is the area that responds to a tap, which can be larger than the control people see. Apple asks for at least 44 by 44 points and Material for 48 by 48 density-independent pixels.
Updated
On this page
In the kit
The components, drawn live from the kit’s tokens. Tap them: they behave as the Figma prototype does.
Text Input, Email
Social Button, icon only
Button, Fill and Link
What does each system call it?
The same idea under its Apple, Material 3 and Appetite UI name.
| System | Name |
|---|---|
| Apple | Hit target, 44 by 44 pt minimum |
| Material 3 | Touch target, 48 by 48 dp minimum |
| Appetite UI | platform/min-touch-target |
What value does it take on iOS and Android?
Read from the kit’s Platform collection and its Material 3 pages, as the docs print them.
| Variable | iOS (ios-md) | Android |
|---|---|---|
platform/min-touch-target | 44 | 48 |
In practice
A small icon can keep its size on screen while its target grows to the minimum around it. Targets that are too small are the commonest reason a mobile screen fails an accessibility review.
In Appetite UI the minimum is one Platform variable, platform/min-touch-target, so a component reads 44 on iOS and 48 on Android from the mode of its frame.