Links vs. Buttons

The Golden Rule

• Links (<a>): Go somewhere. They change the URL or navigate to a page anchor.
• Buttons (<button>): Do something. They trigger an action (submit form, open modal, toggle menu).

Why It Matters

• Key Bindings: Links activate on Enter. Buttons activate on Enter and Space.
• Expectation: Screen reader users expect links to take them to a new context and buttons to change the current context.

Common Anti-Patterns

1. The "Link Button": Using a <div> with an onClick handler.
   • Fix: Use <button type="button">.
2. The "Button Link": Using a link with href="#" to trigger JS.
   • Fix: Use <button>.

Styling

You can make a link look like a button or a button look like a link using CSS, but the underlying HTML must match the behavior.