# Decorative Elements Disable Pointer Events

**MUST** · **ID:** `interactions-decorative-pointer-events` · **Category:** interactions
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-decorative-pointer-events

> MUST: Set `pointer-events: none` on purely decorative layers (glows, gradients, overlays) so they never intercept clicks meant for elements underneath.

Decorative elements like glows and gradients should disable pointer-events to not hijack events

Decorative overlays like gradient backgrounds, glow effects, and visual embellishments can intercept clicks meant for interactive elements underneath. Always set pointer-events: none on purely decorative elements.

## Rule snippet

```tsx
.glow { position: absolute; inset: 0; pointer-events: none; }
```

## Bad — do not do this

`interactions-decorative-pointer-events-bad`

```tsx
export function DecorativePointerEventsBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="relative bg-card border border-border rounded-lg p-6">
        <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent rounded-lg" />
        <h3 className="text-sm font-medium text-foreground mb-2">Interactive Card</h3>
        <p className="text-sm text-muted-foreground mb-4">
          Try to click the button below.
        </p>
        <button
          className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm"
          onClick={() => alert('Clicked!')}
        >
          Click Me
        </button>
      </div>
      <p className="text-xs text-error">
        Gradient overlay steals clicks from the button underneath
      </p>
    </div>
  );
}
```

## Good — do this

`interactions-decorative-pointer-events-good`

```tsx
export function DecorativePointerEventsGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="relative bg-card border border-border rounded-lg p-6">
        <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent rounded-lg pointer-events-none" />
        <h3 className="text-sm font-medium text-foreground mb-2">Interactive Card</h3>
        <p className="text-sm text-muted-foreground mb-4">
          Try to click the button below.
        </p>
        <button
          className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm"
          onClick={() => alert('Clicked!')}
        >
          Click Me
        </button>
      </div>
      <p className="text-xs text-success">
        pointer-events: none on decorative overlay — clicks pass through
      </p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)