📖 Step 3: Design - UI Components & Patterns#78 / 350
Hit Area / Tap Target
Hit Area / Tap Target
📖One-line summary
The actual tappable area of a button or link.
✨Example
Hover over the button to see the real hit area
Hit area (44 px)
The real tappable area should be larger than the visible button (minimum 44×44 px)
⚡Vibe coding prompt examples
>_
Expand hit areas to at least 44x44px for easy mobile touch. Visually keep small icons but expand the touch area.
>_
Connect the hit areas of checkbox and label. Toggle the checkbox by clicking the label text, and make the entire row clickable.
>_
Adjust spacing so adjacent button hit areas do not overlap. Ensure at least 8px gap to prevent mistaps.
Try these prompts in your AI coding assistant!