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.
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, .btn-sm e .btn-xs.
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.
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.
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.
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.
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-*.
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()`