Vai al contenuto principale

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA
Cerca nella documentazione

Buttons

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>

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"><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"><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"><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"><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">
<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">
    <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">
    <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">
    <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

1
2
3
4

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()`

Properties

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-btn-background Controls the background for the button. transparent
--bsi-btn-border-color Controls the border color for the button. transparent
--bsi-btn-border-radius Controls the border radius for the button, using radius tokens. var(--bsi-radius-smooth)
--bsi-btn-border-size Controls the border size for the button. 0
--bsi-btn-disabled-opacity Controls the opacity for disabled buttons. 0.5
--bsi-btn-font-family Controls the font family for the button, using font tokens. var(--bsi-font-sans)
--bsi-btn-font-size Controls the font size for the button, using font tokens. var(--bsi-label-font-size)
--bsi-btn-font-weight Controls the font weight for the button, using font tokens. var(--bsi-font-weight-solid)
--bsi-btn-line-height Controls the line height for the button, using font tokens. var(--bsi-font-leading-3)
--bsi-btn-outline-border-color Controls the outline border color for the button. transparent
--bsi-btn-outline-border-size Controls the outline border size for the button. 2px
--bsi-btn-padding-x Controls the horizontal padding for the button, using spacing tokens. var(--bsi-spacing-s)
--bsi-btn-padding-y Controls the vertical padding for the button, using spacing tokens. var(--bsi-spacing-xs)
--bsi-btn-text-color Controls the text color for the button, using color tokens. var(--bsi-color-text-primary)

Breaking change

  • Il nome delle varianti di dimensione ora coincide con UI Kit Italia:
    • Large (.btn-lg) diventa Grande (stessa classe .btn-lg).
    • Small (.btn-sm) diventa Base (senza classe di dimensione specifica).
    • Mini (.btn-xs) diventa Piccolo (stessa classe .btn-xs).
  • La classe .btn-me è stata sostituita a favore delle classi di spacing generico usando .me-2.
  • Nelle varianti con icona le classi che ne controllano il colore potrebbero aver cambiato nome, ad esempio .icon-white diventa .icon-inverse.