Buttons

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

Utilizzo

Per aggiungere un pulsante personalizzato, è sufficiente utilizzare la classe .btn, associandola a classi di tipo .btn- per applicarne le varianti di stile, dimensione, ecc.

1
<button type="button" class="btn">Link</button>

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

Accessibilità

La classe .btn permette di conferire visivamente agli elementi html l’aspetto di “pulsante”. Anche elementi <a> o <span> possono trasformarsi visivamente in pulsanti, 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>.

Quando non fosse possibile, non dimenticare di utilizzare in modo appropriato gli attributi role="button" per trasmettere il loro scopo alle tecnologie assistive.

Link

1
2
3
4
5
<a class="btn" href="#" role="button">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">
<input class="btn" type="reset" value="Reset">

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>

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.

Link disabilitato

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

Disabilitazione 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à.

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.

Pulsanti 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-lg btn-icon btn-me">
  <span>Icon Button Lg</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 btn-me">
  <span>Icon Button</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-sm btn-icon btn-me">
  <span>Icon Button Sm</span>
  <svg class="icon icon-white ms-1"><use href="/dist/svg/sprites.svg#it-star-full"></use></svg>
</button>

<button class="btn btn-info btn-xs btn-icon ms-1">
  <span>Icon Button Xs</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.

Icona cerchiata

Inoltre è possibile applicare un contorno cerchiato dell’icona utilizzando un contenitore con classe .rounded-icon da inserire all’interno della classe .btn con possibilità di personalizzazione del suo aspetto cromatico 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>Round Icon Lg</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>Round Icon</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>Round Icon Sm</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>Round Icon Xs</span>
</button>

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>

A tutta larghezza

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 caso è stata implementata una variante responsive che visualizza i tasti a tutta larghezza e sovrapposti in mobile per poi affiancarli dl 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>

Approfondimento

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