Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Bottoni

Bottoni

Dimensioni

La dimensione di un bottone va adeguata:

  1. 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
  2. All’importanza dell’azione che il bottone compie
    maggiore dimensione per maggiore importanza.

Le Linee Guida per il design degli applicativi di Regione Lombardia 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.

Dimensione small
Dimensione medium
Dimensione large
Due righe 
<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>

Gerarchia

  1. Bottone Primario
    Una videata dovrebbe contenere un unico bottone primario, che va utilizzato per richiamare l’attenzione dell’utente sull’azione principale da compiere, quella che costituisce lo lo scopo della videata stessa.

  2. Bottone Outline
    Può essere utilizzato per:
    • la negazione dell’azione stessa (es. Annulla o Torna Indietro)
    • un’azione complementare come l’aggiunta di dati prima di procedere
    • la richiesta di ulteriori informazioni (il classico bottone Per saperne di più).
  3. Bottoni Secondari
    Servono per eseguire azioni secondarie e normalmente non necessarie (es. la configurazione di speciali opzioni).
<div class="it25-btn-example">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-outline-primary">Primary outline</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-outline-secondary">Secondary outline</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>

Larghezza dei bottoni

Nell’esempio qui sopra la larghezza dei bottoni è stata fissata a 175 pixel con la classe it25-btn-example.
Tale classe NON VA UTILIZZATA: è stata creata solo per questioni di simmetria di questo specifico caso.
Normalmente la larghezza del bottone è determinata dalla lunghezza della label che contiene (oltre che dal padding).

Posizione

I bottoni devono essere posizionati dove l’utente si aspetta di trovarli.

  • I pulsanti di Conferma, Annulla, Torna Indietro vanno posti in fondo alla pagina perché l’utente deve leggere tutto il contenuto della pagina prima di decidere di premere l’uno o l’altro.
  • I pulsanti di richiesta informazioni o di inserimento di ulteriori opzioni è bene siano vicini ai dati cui quelle informazioni si riferiscono o che quelle opzioni vanno ad integrare.

Bottoni speciali

Danger

Può essere utilizzato solo per azioni che comportano la cancellazione non reversibile di dati, per indurre l’utente a riflettere prima di premerlo.

<div class="it25-btn-example">
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-danger disabled">Disabled</button>
  <button type="button" class="btn btn-outline-danger">Danger outline</button>
  <button type="button" class="btn btn-outline-danger disabled">Disabled</button>
</div>

Mini-button

Esiste anche la classe btn-xs per creare bottoni di dimensioni molto piccole.
Da utilizzare con attenzione, in quanto può rendere il bottone difficile da premere con le dita su smartphone.

<button type="button" class="btn btn-primary btn-xs">Primary</button>
<button type="button" class="btn btn-outline-primary btn-xs">Outline</button>

Tag

Da utilizzare con attenzione, per il motivo di cui sopra, anche il bottone arrotondato di minime dimensioni ottenibile con la classe btn-tag.

<button type="button" class="btn btn-primary btn-tag">Tag</button>
<button type="button" class="btn btn-outline-primary btn-tag">Tag</button>

Bottoni con icona

Small
Medium
Large 
<button class="btn btn-primary btn-sm btn-icon">
  <span>Primary</span>
  <svg class="icon icon-white">
    <use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
</button>
<button class="btn btn-primary btn-icon">
  <span>Primary</span>
  <svg class="icon icon-white">
    <use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
</button>
<button class="btn btn-primary btn-lg btn-icon">
  <span>Primary</span>
  <svg class="icon icon-white">
    <use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
</button>

<button class="btn btn-outline-primary btn-sm btn-icon">
  <span>Outline</span>
  <svg class="icon icon-primary">
    <use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
</button>
<button class="btn btn-outline-primary btn-icon">
  <span>Outline</span>
  <svg class="icon icon-primary">
    <use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
</button>
<button class="btn btn-outline-primary btn-lg btn-icon">
  <span>Outline</span>
  <svg class="icon icon-primary">
    <use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
</button>

Testo del bottone

La dicitura, nel bottone con icona, deve sempre essere compresa in un tag span, per far sì che venga applicata la corretta distanza tra testo e icona del bottone.

Icona a sinistra

<button class="btn btn-primary btn-sm btn-icon" style="position: absolute; bottom: 0px;">
  <svg class="icon icon-white">
    <use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
  <span>Primary</span>
</button>
<button class="btn btn-primary btn-icon" style="position: absolute; bottom: 0px;">
  <svg class="icon icon-white">
    <use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
  <span>Primary</span>
</button>
<button class="btn btn-primary btn-lg btn-icon">
  <svg class="icon icon-white">
    <use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
  <span>Primary</span>
</button>

<button class="btn btn-outline-primary btn-sm btn-icon" style="position: absolute; bottom: 0px;">
  <svg class="icon icon-primary">
    <use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
  <span>Outline</span>
</button>
<button class="btn btn-outline-primary btn-icon" style="position: absolute; bottom: 0px;">
  <svg class="icon icon-primary">
    <use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
  <span>Outline</span>
</button>
<button class="btn btn-outline-primary btn-lg btn-icon">
  <svg class="icon icon-primary">
    <use xlink:href="/bootstrap-lombardia/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
  <span>Outline</span>
</button>

Riferimenti

Il contenuto di questa pagina si riferisce ai seguenti punti della Documentazione di Bootstrap Italia:

Questo sito utilizza cookie tecnici, analytics e di terze parti.
Proseguendo nella navigazione accetti l’utilizzo dei cookie.

Privacy policy