Componente

Back

Il link «Torna indietro» con la freccia a sinistra: un <a> verso la pagina padre, come link semplice o come pulsante piccolo.

Riferimento: <it-back>
Classi: ita-backita-btnita-btn-outlineita-btn-xsita-btn-square
Basato su (daisyUI): btn
Solo CSS: <it-back> chiama history.back(), che è JavaScript. La ricetta punta alla pagina padre con un href vero: funziona anche aperta da un link esterno, dove la cronologia è vuota. Se ti serve proprio la cronologia, aggiungi tu onclick="history.back(); return false".
Storybook: Apri le storie di Back

Esempio base

Torna indietro Torna all'elenco dei servizi

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-6">
  <a href="#" class="ita-back"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21,11.5H5.5l5.3-5.4l-0.7-0.7L3.6,12l6.5,6.6l0.7-0.7l-5.3-5.4H21V11.5z" /></svg><span>Torna indietro</span></a>
  <a href="#" class="ita-back"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21,11.5H5.5l5.3-5.4l-0.7-0.7L3.6,12l6.5,6.6l0.7-0.7l-5.3-5.4H21V11.5z" /></svg><span>Torna all'elenco dei servizi</span></a>
</div>

Come pulsante

Torna indietro

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-6">
  <a href="#" class="ita-btn ita-btn-primary ita-btn-outline ita-btn-xs gap-2"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21,11.5H5.5l5.3-5.4l-0.7-0.7L3.6,12l6.5,6.6l0.7-0.7l-5.3-5.4H21V11.5z" /></svg><span>Torna indietro</span></a>
  <a href="#" class="ita-btn ita-btn-primary ita-btn-outline ita-btn-xs gap-2 ita-btn-square"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21,11.5H5.5l5.3-5.4l-0.7-0.7L3.6,12l6.5,6.6l0.7-0.7l-5.3-5.4H21V11.5z" /></svg><span class="sr-only">Torna indietro</span></a>
</div>

In cima a una pagina

Servizi

Richiedere la carta d'identità elettronica

Mostra il codice HTML

<div class="flex flex-col gap-4">
  <a href="#" class="ita-back"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21,11.5H5.5l5.3-5.4l-0.7-0.7L3.6,12l6.5,6.6l0.7-0.7l-5.3-5.4H21V11.5z" /></svg><span>Servizi</span></a>
  <h2 class="text-3xl font-bold">Richiedere la carta d'identità elettronica</h2>
</div>

Con JavaScript (opzionale)

La ricetta è solo CSS e funziona così com'è. Questi frammenti non sono inclusi nel pacchetto: mostrano come aggiungere il comportamento che richiede uno script, in JavaScript semplice o in React.

Usare la cronologia quando c'èjs

Il link resta un href verso la pagina padre; se l'utente arriva da una pagina dello stesso sito, torna indietro nella cronologia.

// <a href="/servizi" data-back>Torna indietro</a>
document.querySelectorAll("a[data-back]").forEach((link) => {
  link.addEventListener("click", (ev) => {
    const sameSite = document.referrer.startsWith(location.origin);
    if (sameSite && history.length > 1) {
      ev.preventDefault();
      history.back();
    }
  });
});

Componente Reacttsx

export function Back({ href, label = "Torna indietro" }: { href: string; label?: string }) {
  const onClick = (ev: React.MouseEvent) => {
    if (document.referrer.startsWith(location.origin) && history.length > 1) {
      ev.preventDefault();
      history.back(); // with a router: navigate(-1)
    }
  };
  return (
    <a href={href} onClick={onClick} className="inline-flex items-center gap-2 font-semibold text-primary underline-offset-2 hover:underline">
      <span aria-hidden="true">←</span> {label}
    </a>
  );
}