Buttons

Bootstrap Italia definisce alcuni stili per i pulsanti da utilizzare a seconda delle necessità.

Utilizzo

Il pulsante necessita della classe .btn e delle classi .btn- per applicare le varianti di stile, dimensione e altri attributi.

1
<button type="button" class="btn btn-primary">Etichetta pulsante</button>

Le classi .btn sono state pensate per essere utilizzate con l’elemento <button>. Tuttavia, è possibile applicare lo stile di un pulsante anche ad elementi di tipo <a> o <input>, anche se alcuni browser potrebbero mostrare un rendering lievemente diverso.

Pulsante link

1
2
3
4
5
<a class="btn btn-link" href="#" role="button">Pulsante link</a>
<button class="btn btn-secondary" type="submit">Pulsante button</button>
<input class="btn btn-outline-secondary" type="button" value="Pulsante input">
<input class="btn btn-outline-success" type="submit" value="Pulsante submit">
<input class="btn btn-danger" type="reset" value="Pulsante reset">

In questo esempio vengono utilizzate diverse varianti di stile, come .btn-link,.btn-outline-secondary e .btn-danger, che conferiscono a ciascun elemento un aspetto visivo unico.

Accessibilità

Le classi .btn e .btn- conferiscono agli elementi html l’aspetto visivo di un pulsante. Anche elementi <a> o <span> possono subire questa trasformazione provocando discrepanza tra ciò che si rappresenta e la funzione semantica dell’elemento. Questo può provocare complesse problematiche di accessibilità.

Dove il click sul pulsante non genera un cambio di pagina utilizzare esclusivamente il tag <button>.

Qualora non fosse possibile, è necessario applicare in modo appropriato l’attributo role="button" per trasmetterne lo scopo alle tecnologie assistive.

Varianti di dimensione

Per ottenere pulsanti di dimensione più grande o più piccola, è sufficiente utilizzare le classi .btn-lg e .btn-xs. La dimensione .btn-sm coincide con la dimensione base di Bootstrap Italia, per cui non è necessario specificarla.

Grande

1
2
<button type="button" class="btn btn-primary btn-lg me-2">Etichetta pulsante</button>
<button type="button" class="btn btn-secondary btn-lg">Etichetta pulsante</button>

Base

1
2
<button type="button" class="btn btn-primary me-2">Etichetta pulsante</button>
<button type="button" class="btn btn-secondary">Etichetta pulsante</button>

Piccolo

1
2
<button type="button" class="btn btn-primary btn-xs me-2">Etichetta pulsante</button>
<button type="button" class="btn btn-secondary btn-xs">Etichetta pulsante</button>

Larghezza fluida

Per creare pulsanti o gruppi di pulsanti a tutta larghezza, come i block buttons di Bootstrap 4, utilizzare un mix delle utilities display e gap. Con queste utilities abbiamo più controllo su spaziature, allineamento e comportamento responsive rispetto al classico block button.

1
2
3
4
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Primary</button>
  <button class="btn btn-secondary" type="button">Secondary</button>
</div>

In questo esempio è stata implementata una variante responsive che visualizza i pulsanti a larghezza piena e sovrapposti su mobile, per poi disporli affiancati dal breakpoint md in su.

1
2
3
4
<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Primary</button>
  <button class="btn btn-secondary" type="button">Secondary</button>
</div>

Varianti di colore

Gli stili definiti da Bootstrap Italia utilizzano un naming consistente con Bootstrap, con alcune personalizzazioni:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="py-1">
<div class="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-primary disabled">Primary disabled</button>
  <button type="button" class="btn btn-outline-primary disabled">Primary outline disabled</button>
</div>
<div class="btn-example">
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-outline-secondary">Secondary outline</button>
  <button type="button" class="btn btn-secondary disabled">Secondary disabled</button>
  <button type="button" class="btn btn-outline-secondary disabled">Secondary outline disabled</button>
</div>
<div class="btn-example">
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-outline-success">Success outline</button>
  <button type="button" class="btn btn-success disabled">Success disabled</button>
  <button type="button" class="btn btn-outline-success disabled">Success outline disabled</button>
</div>
<div class="btn-example">
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-outline-danger">Danger outline</button>
  <button type="button" class="btn btn-danger disabled">Danger disabled</button>
  <button type="button" class="btn btn-outline-danger disabled">Danger outline disabled</button>
</div>
<div class="btn-example">
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-outline-warning">Warning outline</button>
  <button type="button" class="btn btn-warning disabled">Warning disabled</button>
  <button type="button" class="btn btn-outline-warning disabled">Warning outline disabled</button>
</div>
</div>

Varianti colore su sfondo scuro

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="bg-dark py-1">
<div class="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-primary disabled">Primary disabled</button>
  <button type="button" class="btn btn-outline-primary disabled">Primary outline disabled</button>
</div>
<div class="btn-example">
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-outline-secondary">Secondary outline</button>
  <button type="button" class="btn btn-secondary disabled">Secondary disabled</button>
  <button type="button" class="btn btn-outline-secondary disabled">Secondary outline disabled</button>
</div></div>

Trasmettere significato alle tecnologie assistive

L’uso del colore per aggiungere un significato fornisce solo un’indicazione visiva, che non sarà trasmesso agli utenti di tecnologie assistive – come gli screen reader. Assicurati che le informazioni denotate dal colore siano rese disponibili anche dal contenuto stesso (es.: il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la classe .visually-hidden.

Note sullo stato disabilitato

I tag <a> non supportano l’attributo disabled, per cui è necessario usare la classe .disabled per farli apparire visivamente disabilitati, e in modo da disabilitare pointer-events su di essi sui browser che lo supportano.
I pulsanti disabilitati includeranno l’attributo aria-disabled="true" per indicare lo stato dell’elemento alle tecnologie assistive.

Pulsante disabilitato

1
<a href="#" class="btn btn-primary disabled" role="button" aria-disabled="true">Pulsante disabilitato</a>

Stato disabilitato su elemento link

La classe .disabled usa pointer-events: none per provare a disabilitare l’attivazione dei comportamenti di default dei link <a>, ma tale funzionalità non è gestita in alcuni browsers. Oltre a questo, la navigazione attraverso tastiera rimane abilitata, per cui utenti che utilizzano tecnologie assistive saranno comunque in grado di attivare tali link. Per ovviare a questo problema, è possibile aggiungere l’attributo tabindex="-1" e utilizzare JavaScript per disabilitare le loro funzionalità.

Pulsante con icona

È possibile aggiungere un’icona personalizzata al pulsante con la classe .btn-icon in aggiunta alla classe .btn e alle relative varianti cromatiche e di dimensione definite in precedenza. L’icona può essere posizionata a sinistra o a destra del testo, a seconda della posizione in cui viene inserita all’interno del pulsante.

Per modificare la dimensione dell’icona, è possibile utilizzare le classi .icon-*. Le icone piccole sono raccomandate per i pulsanti di dimensione .btn-xs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<button class="btn btn-success btn-lg btn-icon">
  <span>Etichetta pulsante</span>
  <svg class="icon icon-sm icon-inverse ms-1"><use href="/dist/svg/sprites.svg#it-star-full"></use></svg>
</button>

<button class="btn btn-primary btn-icon">
  <span>Etichetta pulsante</span>
  <svg class="icon icon-sm icon-inverse ms-1"><use href="/dist/svg/sprites.svg#it-star-full"></use></svg>
</button>

<button class="btn btn-danger btn-icon">
  <span>Etichetta pulsante</span>
  <svg class="icon icon-sm icon-inverse ms-1"><use href="/dist/svg/sprites.svg#it-star-full"></use></svg>
</button>

<button class="btn btn-secondary btn-xs btn-icon">
  <span>Etichetta pulsante</span>
  <svg class="icon icon-xs icon-inverse ms-1"><use href="/dist/svg/sprites.svg#it-star-full"></use></svg>
</button>

Allineamento e spaziatura dell’icona

Nel caso si utilizzi un’icona all’interno di un elemento con classe .btn, è necessario inserire il testo del pulsante/link all’interno di un tag <span/> al fine di garantire un perfetto allineamento ed una corretta spaziatura tra l’icona e lo stesso testo.

Pulsante con icona cerchiata

È inoltre possibile aggiungere un contorno circolare all’icona usando un contenitore con classe .rounded-icon all’interno dell’elemento .btn. L’aspetto cromatico può essere personalizzato attraverso i modificatori .rounded-* e .icon.icon-*.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<button class="btn btn-success btn-lg btn-icon me-2">
  <span class="rounded-icon me-2">
    <svg class="icon icon-xs icon-success"><use href="/dist/svg/sprites.svg#it-user"></use></svg>
  </span>
  <span>Etichetta pulsante</span>
</button>

<button class="btn btn-primary btn-icon me-2">
  <span class="rounded-icon me-2">
    <svg class="icon icon-xs icon-primary"><use href="/dist/svg/sprites.svg#it-user"></use></svg>
  </span>
  <span>Etichetta pulsante</span>
</button>

<button class="btn btn-danger btn-icon me-2">
  <span class="rounded-icon me-2">
    <svg class="icon icon-xs icon-danger"><use href="/dist/svg/sprites.svg#it-user"></use></svg>
  </span>
  <span>Etichetta pulsante</span>
</button>

<button class="btn btn-secondary btn-xs btn-icon">
  <span class="rounded-icon me-2">
    <svg class="icon icon-xs icon-secondary"><use href="/dist/svg/sprites.svg#it-user"></use></svg>
  </span>
  <span>Etichetta pulsante</span>
</button>

Attivazione tramite codice

import { Button } from 'bootstrap-italia';

const buttonEl = document.getElementById('myButton');
const button = new Button(buttonEl);

Metodi

Metodo	Descrizione
getInstance	Metodo statico che consente di ottenere l'istanza di avviso associata a un elemento DOM, è possibile utilizzarlo in questo modo: Button.getInstance(domElement).
getOrCreateInstance	Metodo statico che restituisce un'istanza di avviso associata a un elemento DOM o ne crea una nuova nel caso in cui non fosse stata inizializzata. Puoi utilizzarla in questo modo: Button.getOrCreateInstance(element).
dispose	Rimuove la funzionalità Button.
toggle	Attiva/disattiva la classe e sincronizza l'attributo "aria-pressed" con il valore restituito dal metodo `.toggle()`

Breaking change

Modificato il nome delle varianti di dimensione per coincidere con UI Kit Italia
Sostituite negli esempi le classi .btn-me con .me-2.
La class .btn-sm è stata rimossa dagli esempi, perché coincide con la versione base.
La dimensione delle icone non dipendono dalle dimensioni dei pulsanti.

Buttons

Buttons

Utilizzo

Accessibilità

Varianti di dimensione

Grande

Base

Piccolo

Larghezza fluida

Varianti di colore

Varianti colore su sfondo scuro

Trasmettere significato alle tecnologie assistive

Note sullo stato disabilitato

Stato disabilitato su elemento link

Pulsante con icona

Allineamento e spaziatura dell’icona

Pulsante con icona cerchiata

Attivazione tramite codice

Metodi

Breaking change

Breaking change dalla versione 3.0.0