Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Button

Button

1
2
3
4
5
6

<div class="d-flex justify-content-center">
  <button class="btn btn-primary btn-icon">
    <span>BUTTON</span>
    <svg class="icon icon-white ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
  </button>
</div>

Dimensioni

Il pulsante prevede due dimensioni principali e la sua lunghezza dipende dai caratteri del testo.

Large

1
2
3
4

<button class="btn btn-lg btn-primary btn-icon">
  <span>BUTTON</span>
  <svg class="icon icon-white ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</button>

Small

1
2
3
4

<button class="btn btn-primary btn-icon align-middle">
  <span>BUTTON</span>
  <svg class="icon icon-white ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</button>

Per ottenere pulsanti di dimensione più grande è sufficiente utilizzare la classe .btn-lg.
La dimensione .btn-sm coincide con la dimensione base, per cui non è necessario specificarla.

Spacing

Sia in asse verticale che in asse orizzontale la distanza base da impostare tra i pulsanti, a prescindere dalla dimensione, è di 24px.

orizzontale

1
2
3
4
5
6
7
8
9
10

<div style="display: inline-flex">
<button class="btn btn-primary btn-icon me-4">
  <span>BUTTON</span>
  <svg class="icon icon-white ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</button>
<button class="btn btn-primary btn-icon">
  <span>BUTTON</span>
  <svg class="icon icon-white ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</button>
</div>

verticale


1
2
3
4
5
6
7
8
9

<button class="btn btn-primary btn-icon mb-4">
  <span>BUTTON</span>
  <svg class="icon icon-white ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</button>
<br />
<button class="btn btn-primary btn-icon">
  <span>BUTTON</span>
  <svg class="icon icon-white ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</button>

Nota per gli sviluppatori:
Le classi spaziatrici me-4 e mb-4 corrispondono a 1.5rem che, data la dimensione carattere di default (16px), corrispondono ai 24px specificati dal design system.
Naturalmente la distanza ottenuta può variare a seconda sia della dimensione carattere impostata dall’utente sul browser, sia di column-gap e row-gap dell’elemento contenitore.
Nell’esempio della spaziatura orizzontale, i bottoni sono stati inseriti in un div la cui proprietà display è stata impostata a inline-flex.
Lasciando il valore di default, che per il tag div è block con column-gap di 4px, la distanza risultante sarebbe 28px.

Tipologia e stati

Il pulsante prevede due tipologie: primario e secondario, che si invertono a seconda dello sfondo light (di default) o dark.

sfondo light

1
2
3
4
5
6
7
8
9
10

<div style="display: inline-flex">
  <button class="btn btn-primary btn-icon me-4">
    <span>BUTTON</span>
    <svg class="icon icon-white ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
  </button>
  <button class="btn btn-outline-primary btn-icon">
    <span>BUTTON</span>
    <svg class="icon ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
  </button>
</div>

sfondo primary

1
2
3
4
5
6
7
8
9
10

<div class="bg-primary p-3">
  <button class="btn btn-outline-white btn-icon me-4">
    <span>BUTTON</span>
    <svg class="icon icon-white ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
  </button>
  <button class="btn  bg-white btn-icon">
    <span>BUTTON</span>
    <svg class="icon icon-primary ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
  </button>
</div>

sfondo dark

1
2
3
4
5
6
7
8
9
10

<div class="bg-dark p-3">
  <button class="btn btn-primary btn-icon me-4">
    <span>BUTTON</span>
    <svg class="icon icon-primary ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
  </button>
  <button class="btn btn-outline-primary btn-icon">
    <span>BUTTON</span>
    <svg class="icon icon-white ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
  </button>
</div>

stato disabled

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
33
34
35
36
37
38

<div class="row">
  <div class="col-12 col-lg-4">
    <div class="p-3">
      <button class="btn btn-primary btn-icon me-4" disabled>
        <span>BUTTON</span>
        <svg class="icon icon-white ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
      </button>
      <button class="btn btn-outline-primary btn-icon" disabled>
        <span>BUTTON</span>
        <svg class="icon ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
      </button>
    </div>
  </div>
  <div class="col-12 col-lg-4">
    <div class="bg-primary p-3">
      <button class="btn btn-outline-white btn-icon me-4" disabled>
        <span>BUTTON</span>
        <svg class="icon icon-white ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
      </button>
      <button class="btn btn-outline-primary bg-white btn-icon" disabled>
        <span>BUTTON</span>
        <svg class="icon icon-primary ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
      </button>
    </div>
  </div>
  <div class="col-12 col-lg-4">
    <div class="bg-dark p-3">
      <button class="btn btn-primary btn-icon me-4" disabled>
        <span>BUTTON</span>
        <svg class="icon icon-primary ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
      </button>
      <button class="btn btn-outline-primary btn-icon" disabled>
        <span>BUTTON</span>
        <svg class="icon icon-white ms-2"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
      </button>
    </div>
  </div>
</div>

Circle button

Il pulsante large va usato principalmente per la navigazione in pagina (es. Back to top), quello small per slider e azioni.

Large

1
2
3
4
5
6
7
8
9
10
11
12

<button class="btn btn-lg btn-primary btn-icon btn-circle me-4" aria-label="torna indietro">
  <svg class="icon icon-white"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-left"></use></svg>
</button>
<button class="btn btn-lg btn-outline-primary btn-icon btn-circle me-4" aria-label="vai avantii">
  <svg class="icon icon-primary"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</button>
<button class="btn btn-lg btn-primary btn-icon btn-circle me-4" disabled aria-label="torna su">
  <svg class="icon icon-white"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-up"></use></svg>
</button>
<button class="btn btn-lg btn-outline-primary btn-icon btn-circle" disabled aria-label="vai in giù">
  <svg class="icon icon-primary"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-down"></use></svg>
</button>

Small

1
2
3
4
5
6
7
8
9
10
11
12

<button class="btn btn-primary btn-icon btn-circle me-4" aria-label="vai avantii">
  <svg class="icon icon-white"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-left"></use></svg>
</button>
<button class="btn btn-outline-primary btn-icon btn-circle me-4" aria-label="vai avantii">
  <svg class="icon icon-primary"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</button>
<button class="btn btn-primary btn-icon btn-circle me-4" disabled aria-label="vai avantii">
  <svg class="icon icon-white"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-up"></use></svg>
</button>
<button class="btn lg btn-outline-primary btn-icon btn-circle" disabled aria-label="vai avantii">
  <svg class="icon icon-primary"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-down"></use></svg>
</button>

Sfondi

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
33
34

<div class="row">
  <div class="col-12 col-lg-6">
    <div class="bg-primary p-3">
      <button class="btn btn-lg btn-outline-white btn-icon btn-circle me-4" aria-label="vai avantii">
        <svg class="icon icon-white"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-left"></use></svg>
      </button>
      <button class="btn btn-lg btn-outline-primary bg-white btn-icon btn-circle me-4" aria-label="vai avantii">
        <svg class="icon icon-primary"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
      </button>
      <button class="btn btn-lg btn-outline-white btn-icon btn-circle me-4" disabled aria-label="vai avantii">
        <svg class="icon icon-white"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-up"></use></svg>
      </button>
      <button class="btn btn-lg btn-outline-primary bg-white btn-icon btn-circle" disabled aria-label="vai avantii">
        <svg class="icon icon-primary"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-down"></use></svg>
      </button>
    </div>
  </div>
  <div class="col-12 col-lg-6">
    <div class="bg-dark p-3">
      <button class="btn btn-lg btn-primary btn-icon btn-circle me-4" aria-label="vai avantii">
        <svg class="icon icon-primary"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-left"></use></svg>
      </button>
      <button class="btn btn-lg btn-outline-primary btn-icon btn-circle me-4" aria-label="vai avantii">
        <svg class="icon icon-white"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
      </button>
      <button class="btn btn-lg btn-primary btn-icon btn-circle me-4" disabled aria-label="vai avantii">
        <svg class="icon icon-primary"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-up"></use></svg>
      </button>
      <button class="btn btn-lg btn-outline-primary btn-icon btn-circle" disabled aria-label="vai avantii">
        <svg class="icon icon-white"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-arrow-down"></use></svg>
      </button>
    </div>
  </div>
</div>

Documentazione tecnica

Per ulteriori dettagli tecnici sui bottoni si veda la voce:
Buttons

Breaking change

Eliminata tipologia bottoni secondari grigi.