# No Dead Zones

**MUST** · **ID:** `interactions-no-dead-zones` · **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-no-dead-zones

> MUST: No "dead-looking" interactive zones—if it looks clickable, it is

If part of a control looks interactive, it should be interactive

When part of a component looks clickable (like a card with a button), make the entire component clickable, not just the button. This matches user expectations and reduces frustration from clicking "dead zones" that don't respond.

## Bad — do not do this

`interactions-no-dead-zones-bad`

```tsx
export function NoDeadZonesBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg overflow-hidden">
        <div className="p-4">
          <div className="flex items-start gap-3">
            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium">
              A
            </div>
            <div className="flex-1">
              <h3 className="font-medium text-foreground">Project Alpha</h3>
              <p className="text-sm text-muted-foreground">Updated 2 hours ago</p>
            </div>
            <button className="px-3 py-1 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90">
              Open
            </button>
          </div>
        </div>
      </div>
      <p className="text-xs text-error mt-4">
        Only the button is clickable - large card area is dead zone
      </p>
    </div>
  );
}
```

## Good — do this

`interactions-no-dead-zones-good`

```tsx
export function NoDeadZonesGood() {
  const handleCardClick = () => {
    // Navigate to project
  };

  return (
    <div className="w-full max-w-sm">
      <button
        onClick={handleCardClick}
        className="w-full text-left bg-card border border-border rounded-lg overflow-hidden hover:border-primary/30 hover:shadow-md transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
      >
        <div className="p-4">
          <div className="flex items-start gap-3">
            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium">
              A
            </div>
            <div className="flex-1">
              <h3 className="font-medium text-foreground">Project Alpha</h3>
              <p className="text-sm text-muted-foreground">Updated 2 hours ago</p>
            </div>
            <span className="px-3 py-1 text-sm bg-primary text-primary-foreground rounded-lg">
              Open
            </span>
          </div>
        </div>
      </button>
      <p className="text-xs text-success mt-4">
        Entire card is clickable - no dead zones
      </p>
    </div>
  );
}
```

## References

- [Making Clickable Elements Recognizable](https://www.nngroup.com/articles/clickable-elements/)