Button vs link
A button does something and leaves you on the page. A link takes you somewhere else. Check what the address bar does after the click, and the decision is already made.
The rule
Everything else about these two, the styling, the states, the hover treatment, follows from one fact: does the URL change? A button performs an action and leaves you exactly where you were. A link takes you to a different address, whether that's another page, another point on this one, or a downloaded file. Check what the address bar does the instant someone clicks, and every other choice, hierarchy, disabled state, underline, falls into place behind it.
Side by side
| Button | Link | |
|---|---|---|
| URL after click | Stays the same | Changes, or the page scrolls to a new point |
| Right-click menu | A generic browser menu | "Open in new tab," "Copy link address" |
| Middle-click or Cmd-click | Does nothing special | Opens in a new tab |
| Can be disabled | Yes, while a request is in flight or a form is incomplete | No native disabled state |
| Underline by default | No | Yes, inside a paragraph |
| HTML element | <button type="button"> | <a href="…"> |
| Keyboard | Space or Enter activates | Enter activates |
Amazon's "Add to cart" is a button for exactly this reason: it changes what's in your basket and leaves you on the product page. The "Track package" link on the order confirmation that follows is a link, because clicking it takes you to a different page entirely, the carrier's own tracking site. Style either one however the design needs. The underline or the fill decides nothing. The address bar does.
Use a button when
- Something happens and the page stays exactly where it was, like adding an item, opening a modal, or submitting a form
- The action needs a loading or disabled state while a request runs
- The result is destructive or needs confirming, since a button has states built for that interruption and a link does not
Use a link when
- Clicking it loads a new page, a new site, or scrolls to another point on the current page
- Someone might want to open it in a new tab, copy the address, or hover to preview the destination first
- It downloads a file, opens an email client, or starts a phone call
Where people get it wrong
The most common version is a link built to act like a button: an <a> with href="#", wired to onClick and preventDefault(), doing something in place instead of navigating. It breaks the moment anyone tries the browser's own link behaviour on it. Right-click "Open in new tab" opens nothing. Middle-click does nothing. Hovering shows # in the status bar instead of a real destination. None of that shows up in a quick click-test during development, only later, when someone tries to open three product rows in three tabs and can't.
The reverse mistake is a button doing navigation through router.push() inside an onClick handler, styled to look like a plain text link. It loses the same right-click and middle-click behaviour, and a screen reader announces it as a button, which sets the wrong expectation for where the click leads.
A quieter version sits inside forms: a <button> with no explicit type defaults to type="submit", so a "Cancel" or a secondary action inside a form can submit it by accident. Writing type="button" on every button that isn't the actual submit action rules it out.
A quick way to check: right-click it. If "Open in new tab" appears and works, it's a link, whatever tag built it. If it doesn't, and clicking it does something without moving you, it's a button. The behaviour under a right-click never lies, even when the markup does.
Last reviewed 30 JUL 2026