Bottoni
Call to action
La Call to action è un invito all’utente a compiere una determinata azione, identificabile come messaggio testuale univoco e veicolato attraverso un bottone.
Si tratta di un elemento fondamentale e deve essere chiaro e conciso.
Tutti i bottoni primari e secondari hanno in comune: colori, forma del container e le diverse grandezze con relative spaziature.
I bottoni disegnati hanno di default un container con corner radius di 8 pixel.
Il colore terziario viene utilizzato esclusivamente per i bottoni in alcuni contesti specifici che ne richiedono l’utilizzo, non va utilizzato nei testi.
Bottoni
La dimensione di un bottone va adeguata:
- Al tipo di schermo sul quale viene visualizzato
su uno smartphone non deve occupare troppo spazio ma nemmeno essere troppo piccolo da risultare difficile da cliccare utilizzando il pollice - All’importanza dell’azione che il bottone compie
maggiore dimensione per maggiore importanza.
Le Linee Guida prevedono tre dimensioni principali di bottoni: small, medium, e large, corrispondenti alle classi btn-sm, btn e btn-lg.
Il bottone di due righe mostrato è stato ottenuto fissandone la larghezza, cosa che però ne limita la reponsività.
Il testo all’interno di un bottone va automaticamente su più righe qualora non ci sia abbastanza spazio orizzontale.
Si raccomanda quindi di usare diciture essenziali per i bottoni, ponendo all’esterno di essi il testo necessario a chiarire l’azione eseguita.
<button type="button" class="btn btn-primary btn-sm">Lorem ipsum</button>
<button type="button" class="btn btn-primary btn">Lorem ipsum</button>
<button type="button" class="btn btn-primary btn-lg">Lorem ipsum</button>
<button type="button" class="btn btn-primary btn-lg" style="max-width: 160px;">Lorem ipsum dolor sit</button>Nomeclatura e classi
La nomenclatura delle classi di bootstrap è differente da quella delle Linee Guida di Regione Lombardia.
1
2
3
4
5
6
7
8
9
10
11
12
<div class="it25-btn-example">
<button type="button" class="btn btn-primary">Primario</button>
<button type="button" class="btn btn-outline-primary">Secondario</button>
<button type="button" class="btn btn-secondary">Terziario</button>
<button type="button" class="btn btn-outline-secondary">Quaternario</button>
</div>
<div class="it25-btn-example">
<button type="button" class="btn btn-primary disabled">Disabled</button>
<button type="button" class="btn btn-outline-primary disabled">Disabled</button>
<button type="button" class="btn btn-secondary disabled">Disabled</button>
<button type="button" class="btn btn-outline-secondary disabled">Disabled</button>
</div>
La corrispondenza è:
| Linee guida | Bootstrap |
|---|---|
| Primario | primary |
| Secondario | outline-primary |
| Terziario | secondary |
| Quaternario | outline-secondary |
Distanziamento
<div>
<button type="button" class="btn btn-primary btn-sm my-3">Lorem ipsum</button>
<br />
<button type="button" class="btn btn-outline-primary btn-sm">Lorem ipsum</button>
</div>
<div>
<button type="button" class="btn btn-primary btn-sm me-3">Lorem ipsum</button>
<button type="button" class="btn btn-outline-primary btn-sm">Lorem ipsum</button>
</div>La distanza di 16px corrisponde al valore 3 delle spaziature.
Nell’esempio:
- la classe
my-3imposta un margin sia top che bottom - la classe
me-3imposta un margin-right.
Per tutti i dettagli sulle spaziature si veda la Documentazione tecnica.
Bottoni con icone
Alcune call to action potrebbero prevedere un’icona accompagnata al testo per enfatizzare l’azione e renderla più chiara e di immediata comprensione per l’utente.
<button type="button" class="btn btn-primary btn-sm">
<svg class="icon icon-white">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-check-circle"></use>
</svg>
<span class="text-start">Lorem ipsum</span>
</button>
<button type="button" class="btn btn-primary btn">
<svg class="icon icon-white">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-check-circle"></use>
</svg>
<span class="text-start">Lorem ipsum</span>
</button>
<button type="button" class="btn btn-primary btn-lg">
<svg class="icon zicon-white">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-check-circle"></use>
</svg>
<span class="text-start">Lorem ipsum</span>
</button>
<button type="button" class="btn btn-primary btn-lg" style="max-width: 200px">
<svg class="icon icon-lg icon-white">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-check-circle"></use>
</svg>
<span class="text-start">Lorem ipsum</span>
</button>Bottoni mini
I Bottoni mini devono essere utilizzati esclusivamente per creare un linguaggio gerarchico delle azioni, in caso di azioni secondarie rispetto a quelle principali.
<button type="button" class="btn btn-primary btn-xs btn-me">Lorem ipsum</button>
<button type="button" class="btn btn-outline-primary btn-xs">Lorem ipsum</button>Text buttons
Alcune call to action possono essere costituite da solo testo, senza un contenitore.
Queste vengono applicate al menu orizzontale o in caso di hyperlink.
<a class="btn btn-lg btn-link active" href="#" role="button">Lorem ipsum</a>
<a class="btn btn-link active" href="#" role="button">Lorem ipsum</a>
<a class="btn btn-sm btn-link active" href="#" role="button">Lorem ipsum</a>
<a class="btn btn-xs btn-link active" href="#" role="button">Lorem ipsum</a>Nota: la sottolineatura è legata alla classe active.
Tags
Il Tag evidenzia una parola chiave o un termine associato ad un’informazione e lo classifica.
Deve essere adottato per la ricerca di informazioni basata su parole chiave.
<button type="button" class="btn btn-primary btn-tag btn-me">Tag button</button>
<button type="button" class="btn btn-outline-primary btn-tag">Tag button</button>