Bottoni

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

Utilizzo

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

<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 bottoni anche ad elementi di tipo <a> o <input>, anche se alcuni browser potrebbero mostrare un rendering lievemente diverso.

Accessibilità

In questi casi, non dimenticare di utilizzare in modo appropriato gli attributi role="button" per trasmettere il loro scopo alle tecnologie assistive.

Link

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

<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>
</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>
</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 bottoni disabilitati includeranno l’attributo aria-disabled="true" per indicare lo stato dell’elemento alle tecnologie assistive.

Link disabilitato

<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

<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>
</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>
</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 .sr-only.

Bottoni con icona

E’ possibile aggiungere un’icona personalizzata al bottone con la classe .btn-icon in aggiunta alla classe .btn e alle relative varianti cromatiche e di dimensione.

Accessibilità icone

Valutare caso per caso se l’icona ha bisogno di una descrizione aria-label o se è preferibile nasconderla (perché non significativa) con l’attributo aria-hidden="true"

<button class="btn btn-success btn-lg btn-icon">
  <svg class="icon icon-white" aria-label="Attenzione">
    <use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-warning-circle"></use>
  </svg>
  <span>Icon Button Lg</span>
</button>

<button class="btn btn-primary btn-icon">
  <svg class="icon icon-white" aria-hidden="true">
    <use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
  <span>Icon Button</span>
</button>

<button class="btn btn-danger btn-sm btn-icon">
  <svg class="icon icon-secondary" aria-hidden="true">
    <use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
  <span>Icon Button Sm</span>
</button>

<button class="btn btn-info btn-xs btn-icon">
  <svg class="icon icon-danger" aria-hidden="true">
    <use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-star-full"></use>
  </svg>
  <span>Icon Button Xs</span>
</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 bottone/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-*.

<button class="btn btn-success btn-lg btn-icon">
  <span class="rounded-icon">
    <svg class="icon icon-success" aria-hidden="true">
      <use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-user"></use>
    </svg>
  </span>
  <span>Round Icon Lg</span>
</button>

<button class="btn btn-primary btn-icon">
  <span class="rounded-icon">
    <svg class="icon icon-primary" aria-hidden="true">
      <use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-user"></use>
    </svg>
  </span>
  <span>Round Icon</span>
</button>

<button class="btn btn-danger btn-sm btn-icon">
  <span class="rounded-icon rounded-secondary">
    <svg class="icon icon-white" aria-hidden="true">
      <use href="/bootstrap-italia/1.x/dist/svg/sprite.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 rounded-danger">
    <svg class="icon icon-white" aria-hidden="true">
      <use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-user"></use>
    </svg>
  </span>
  <span>Round Icon Xs</span>
</button>

Varianti di dimensione

Per ottenere bottoni di dimensione più grande o più piccola, è sufficiente utilizzare le classi .btn-lg, .btn-sm e .btn-xs.

Large

<button type="button" class="btn btn-primary btn-lg">Primary Large</button>
<button type="button" class="btn btn-secondary btn-lg">Secondary Large</button>

Small

<button type="button" class="btn btn-primary btn-sm">Primary Small</button>
<button type="button" class="btn btn-secondary btn-sm">Secondary Small</button>

Mini

<button type="button" class="btn btn-primary btn-xs">Primary Mini</button>
<button type="button" class="btn btn-secondary btn-xs">Secondary Mini</button>

Aggiungendo la classe .btn-block si ottengono invece bottoni che prendono tutta l’ampiezza a loro disposizione, a seconda delle dimensioni del loro contenitore. In questo caso, anche i bordi non sono più arrotondati.

<button type="button" class="btn btn-primary btn-lg btn-block">Primary Block</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Secondary Block</button>

Approfondimento

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