Torna indietro
Consente agli utenti di avere un link o bottone con un’azione equivalente al “torna indietro” del browser
Aggiungendo la classe .go-back
a qualsiasi link o bottone è possibile ottenere lo stesso comportamento del tasto “Indietro” del browser: retrocedere di un passo nella cronologia di navigazione.
Link
Quando si utilizza un link (tag <a>
) è necessario aggiungere un valore all’attributo href perché il link sia correttamente navigabile via tastiera.
<a href="#" class="go-back"><svg class="icon icon-sm icon-primary mr-2"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-left"></use></svg> Torna indietro</a>
Bottoni
Nel caso dell’utilizzo di un bottone l’accorgimento sopraindicato non è necessario.
<button type="button" class="btn btn-primary go-back"><svg class="icon icon-sm icon-white mr-2"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-left"></use></svg> Torna indietro</button>
<button type="button" class="btn btn-primary go-back"><svg class="icon icon-sm icon-white mr-2"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-up"></use></svg> Livello superiore</button>
Bottoni con sola icona
E’ possibile creare bottoni senza testo dotati di sola icona avendo cura di includere il testo alternativo per gli screen reader in un tag <span>
con classe .sr-only
.
<button type="button" class="btn btn-primary go-back"><svg class="icon icon-sm icon-white"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-left"></use></svg><span class="sr-only">Torna indietro</span></button>
<button type="button" class="btn btn-primary go-back"><svg class="icon icon-sm icon-white"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-up"></use></svg><span class="sr-only">Livello superiore</span></button>