# Prevent Double-tap Zoom

**MUST** · **ID:** `interactions-touch-action` · **Category:** interactions
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-touch-action

> MUST: `touch-action: manipulation` to prevent double-tap zoom; set `-webkit-tap-highlight-color` to match design

Set touch-action: manipulation on controls

Mobile browsers delay click events by ~300ms to detect double-tap zoom. Setting touch-action: manipulation removes this delay for interactive elements, making the interface feel more responsive.

## Bad — do not do this

`interactions-touch-action-bad`

```tsx
export function TouchActionBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <div className="flex gap-2 mb-4">
          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90">
            Button 1
          </button>
          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90">
            Button 2
          </button>
        </div>
        <p className="text-sm text-muted-foreground">
          On mobile, rapidly tapping these buttons triggers double-tap zoom instead of the click. There's a ~300ms delay on each tap.
        </p>
        <div className="mt-3 bg-error/10 border border-error/20 rounded-lg p-2">
          <code className="text-xs text-error-foreground font-mono">
            No touch-action set
          </code>
        </div>
      </div>
      <p className="text-xs text-error mt-4">
        300ms tap delay on mobile due to double-tap zoom detection
      </p>
    </div>
  );
}
```

## Good — do this

`interactions-touch-action-good`

```tsx
export function TouchActionGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <div className="flex gap-2 mb-4">
          <button className="touch-manipulation px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90">
            Button 1
          </button>
          <button className="touch-manipulation px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90">
            Button 2
          </button>
        </div>
        <p className="text-sm text-muted-foreground">
          touch-action: manipulation removes the double-tap zoom delay. Taps register instantly on mobile.
        </p>
        <div className="mt-3 bg-success/10 border border-success/20 rounded-lg p-2">
          <code className="text-xs text-success-foreground font-mono">
            touch-action: manipulation
          </code>
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        Instant tap response with touch-action: manipulation
      </p>
    </div>
  );
}
```

## References

- [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action)