# Feedback Near Trigger

**MUST** · **ID:** `design-feedback-near-trigger` · **Category:** design
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-feedback-near-trigger

> MUST: Render feedback at its trigger: swap the copy button to an inline checkmark, highlight the erroring input — do not fire a distant toast for a local action.

Display feedback relative to its trigger — show inline confirmation, not distant notifications

When feedback appears far from the action that triggered it, users may miss it entirely. Showing confirmation inline — like a checkmark replacing a copy button or highlighting the specific input with an error — keeps attention where it belongs.

## Bad — do not do this

`design-feedback-near-trigger-bad`

```tsx
import { useState } from 'react';

export function FeedbackNearTriggerBad() {
  const [toast, setToast] = useState(false);

  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 relative min-h-[140px]">
        <button
          onClick={() => { setToast(true); setTimeout(() => setToast(false), 2000); }}
          className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm"
        >
          Copy Link
        </button>
        {toast && (
          <div className="absolute bottom-2 right-2 bg-foreground text-background text-xs px-3 py-2 rounded-lg shadow-lg">
            ✓ Copied to clipboard!
          </div>
        )}
        <p className="text-xs text-muted-foreground mt-3">Feedback appears far from the button — easy to miss.</p>
      </div>
      <p className="text-xs text-error">Toast notification far from trigger — breaks attention flow</p>
    </div>
  );
}
```

## Good — do this

`design-feedback-near-trigger-good`

```tsx
import { useState } from 'react';

export function FeedbackNearTriggerGood() {
  const [copied, setCopied] = useState(false);

  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 min-h-[140px]">
        <button
          onClick={() => { setCopied(true); setTimeout(() => setCopied(false), 2000); }}
          className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm inline-flex items-center gap-2"
        >
          {copied ? (
            <>
              <span>✓</span>
              <span>Copied!</span>
            </>
          ) : (
            <>
              <span>📋</span>
              <span>Copy Link</span>
            </>
          )}
        </button>
        <p className="text-xs text-muted-foreground mt-3">Feedback appears right on the trigger — impossible to miss.</p>
      </div>
      <p className="text-xs text-success">Inline feedback on trigger — clear and immediate</p>
    </div>
  );
}
```

## References

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