Rules Hub

Coding Rules Library

← Back to all rules
frontend ruleStack: react
accessibilitysemanticshtmlreactux

Use anchor tags for navigation, buttons for actions

If an element opens a URL or navigates the user, use an anchor tag instead of a button with an onClick handler.

PR: Feat/FCK-1941 - Add Phone App modal after Enter Code form #667Created: Dec 7, 2025

Bad example

Old codetsx
1const DownloadButton = () => (
2 <button
3 className="btn-primary"
4 onClick={() => {
5 // BAD: Using JavaScript to navigate breaks standard browser behavior
6 window.open('https://example.com/app', '_blank');
7 }}
8 >
9 Download App
10 </button>
11);

Explanation (EN)

Using a `<button>` with `onClick` for navigation prevents users from middle-clicking to open in a new tab, seeing the URL on hover, or using assistive technology correctly. Screen readers announce 'button' (implies in-page action) instead of 'link' (implies navigation).

Objašnjenje (HR)

Korištenje `<button>` elementa s `onClick` handlerom za navigaciju onemogućuje korisnicima otvaranje poveznice u novoj kartici (srednji klik) i pregled URL-a pri prelasku mišem. Čitači ekrana ovo najavljuju kao gumb (akcija), a ne kao poveznicu (navigacija).

Good example

New codetsx
1const DownloadLink = () => (
2 <a
3 className="btn-primary"
4 href="https://example.com/app"
5 target="_blank"
6 rel="noopener noreferrer"
7 >
8 Download App
9 </a>
10);

Explanation (EN)

Using an `<a>` tag ensures native browser behavior works (right-click menu, middle-click, URL preview). It is semantically correct and accessible. CSS can be used to make the link look like a button if needed.

Objašnjenje (HR)

Korištenje `<a>` taga osigurava rad standardnih funkcija preglednika (izbornik desnog klika, srednji klik, pregled URL-a). Semantički je ispravno i pristupačno. CSS se može koristiti kako bi poveznica izgledala kao gumb ako je potrebno.

Notes (EN)

For internal navigation in SPAs (React Router, Next.js), use the framework's `<Link>` component, which renders an accessible `<a>` tag under the hood.

Bilješke (HR)

Za internu navigaciju u SPA aplikacijama (React Router, Next.js), koristite komponentu `<Link>` koja u pozadini renderira pristupačan `<a>` tag.