# Links Are Links

**MUST** · **ID:** `interactions-links-are-links` · **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-links-are-links

> MUST: Links are links—use `<a>/<Link>` for navigation (support Cmd/Ctrl/middle-click)

Use <a> or <Link> for navigation so browser behaviors work

Links should use anchor tags so users can right-click to copy the URL, cmd-click to open in a new tab, etc. Using buttons or divs for navigation breaks these standard browser features and hurts accessibility.

## Bad — do not do this

`interactions-links-are-links-bad`

```tsx
export function LinksAreLinksBad() {
  const handleClick = () => {
    alert('Navigating to dashboard...');
  };

  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="font-semibold text-foreground mb-2">Your Projects</h3>
        <button
          onClick={handleClick}
          className="text-primary hover:text-primary/90 hover:underline"
        >
          View Dashboard
        </button>
      </div>
      <p className="text-xs text-muted-foreground">
        Try right-clicking or Cmd+clicking - no context menu, can't open in new tab
      </p>
    </div>
  );
}
```

## Good — do this

`interactions-links-are-links-good`

```tsx
export function LinksAreLinksGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="font-semibold text-foreground mb-2">Your Projects</h3>
        <a
          href="#dashboard"
          className="text-primary hover:text-primary/90 hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring rounded"
        >
          View Dashboard
        </a>
      </div>
      <p className="text-xs text-success">
        Right-click or Cmd+click works - standard link behavior
      </p>
    </div>
  );
}
```

## References

- [Links vs Buttons](https://www.nngroup.com/articles/command-links/)