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, .btn-sm e .btn-xs.

Large

1
2
<button type="button" class="btn btn-primary btn-lg btn-me">Primary large</button>
<button type="button" class="btn btn-secondary btn-lg">Secondary large</button>

Small

1
2
<button type="button" class="btn btn-primary btn-sm btn-me">Primary small</button>
<button type="button" class="btn btn-secondary btn-sm">Secondary small</button>

Mini

1
2
<button type="button" class="btn btn-primary btn-xs btn-me">Primary mini</button>
<button type="button" class="btn btn-secondary btn-xs">Secondary mini</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.

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-icon">
  <span>Etichetta pulsante</span>
  <svg class="icon icon-white 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-white 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-white ms-1"><use href="/dist/svg/sprites.svg#it-star-full"></use></svg>
</button>

<button class="btn btn-secondary btn-icon">
  <span>Etichetta pulsante</span>
  <svg class="icon icon-white 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 btn-me">
  <span class="rounded-icon">
    <svg class="icon 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 btn-me">
  <span class="rounded-icon">
    <svg class="icon icon-primary"><use href="/dist/svg/sprites.svg#it-user"></use></svg>
  </span>
  <span>Etichetta pulsante</span>
</button>

<button class="btn btn-danger btn-sm btn-icon btn-me">
  <span class="rounded-icon">
    <svg class="icon 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-secondary"><use href="/dist/svg/sprites.svg#it-user"></use></svg>
  </span>
  <span>Etichetta pulsante</span>
</button>

Approfondimento

Per ulteriori informazioni sui pulsanti si rimanda alla sezione buttons del sito di Bootstrap.