Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Give click-activated elements cursor: pointer
Clickable elements — especially non-<button>/<a> elements such as a clickable <div> or <span> — should set cursor: pointer so they read as interactive. Prefer a real <button> where possible; when you can't, at least signal interactivity with the cursor.
Bad example
| 1 | <div onClick={openModal}>Filter</div> |
| 2 | /* no cursor: pointer — doesn't look clickable */ |
Explanation (EN)
Non-native interactive elements don't get a pointer cursor by default, so users can't tell they're clickable.
Objašnjenje (HR)
Ne-nativni interaktivni elementi po defaultu nemaju pointer kursor, pa korisnik ne vidi da su klikabilni.
Good example
| 1 | .filter__label { |
| 2 | cursor: pointer; /* signals it's clickable */ |
| 3 | } |
| 4 | /* better still: render it as a real <button> */ |
Explanation (EN)
Add cursor: pointer to the clickable element (and ideally use a real <button> for semantics/keyboard support).
Objašnjenje (HR)
Dodaj cursor: pointer na klikabilan element (a idealno ga renderiraj kao pravi <button> zbog semantike i tipkovnice).