Vai al contenuto principale

Bootstrap Italia

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

Chips

Chips

Elementi compatti che rappresentano un input, attributo o azione.

Una chip è composta da un tag div con classe .chip. Contiene una label e, opzionalmente, un pulsante di chiusura/rimozione, un’icona o un avatar.

La versione con sola label centra il testo al suo interno e richiede una classe aggiuntiva .chip-simple.

Aggiungendo la classe .chip-lg al contenitore si ottiene una versione più grande della chip.

L’azione richiesta per l’eliminazione della chip andrà associata al <button>.

Varianti standard e grandi

Solo testo

Etichetta

Testo e chiusura

Etichetta

Icona, etichetta e pulsante

Etichetta

Avatar, etichetta e chiusura

Mario Rossi
Etichetta

Solo testo grande

Etichetta

Testo e chiusura grande

Etichetta

Icona, testo e chiusura grande

Etichetta

Avatar, testo e chiusura grande

Mario Rossi
Etichetta 

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<div class="row bg-white p-4">
  <div class="col-12 col-md-6">
    <p class="mt-4 mb-2">Solo testo</p>
    <div class="chip">
      <span class="chip-label">Etichetta</span>
    </div>
    <p class="mt-4 mb-2">Testo e chiusura</p>
    <div class="chip">
      <span class="chip-label">Etichetta</span>
      <button  data-bs-dismiss='alert'>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina etichetta</span>
      </button>
    </div>
    <p class="mt-4 mb-2">Icona, etichetta e pulsante</p>
    <div class="chip">
      <svg class="icon icon-xs"><use href="/dist/svg/sprites.svg#it-github"></use></svg>
      <span class="chip-label">Etichetta</span>
      <button data-bs-dismiss='alert'>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina etichetta</span>
      </button>
    </div>
    <p class="mt-4 mb-2">Avatar, etichetta e chiusura</p>
    <div class="chip">
      <div class="avatar size-xs">
        <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
      </div>
      <span class="chip-label">Etichetta</span>
      <button data-bs-dismiss='alert'>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina etichetta</span>
      </button>
    </div>
  </div>
  <div class="col-12 col-md-6">
    <p class="mt-4 mb-2">Solo testo grande</p>
    <div class="chip chip-lg">
      <span class="chip-label">Etichetta</span>
    </div>
    <p class="mt-4 mb-2">Testo e chiusura grande</p>
    <div class="chip chip-lg alert">
      <span class="chip-label">Etichetta</span>
      <button data-bs-dismiss='alert'>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina etichetta</span>
      </button>
    </div>
    <p class="mt-4 mb-2">Icona, testo e chiusura grande</p>
    <div class="chip chip-lg alert">
      <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-github"></use></svg>
      <span class="chip-label">Etichetta</span>
      <button data-bs-dismiss='alert'>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina etichetta</span>
      </button>
    </div>
    <p class="mt-4 mb-2">Avatar, testo e chiusura grande</p>
    <div class="chip chip-lg alert">
      <div class="avatar size-sm">
        <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
      </div>
      <span class="chip-label">Etichetta</span>
      <button data-bs-dismiss='alert'>
        <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina etichetta</span>
      </button>
    </div>
  </div>
</div>
Etichetta con link Etichetta con link Etichetta con link Etichetta con link Etichetta con link Etichetta con link 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  <a href="#" class="chip">
    <span class="chip-label">Etichetta con link</span>
  </a>
  <a href="#" class="chip chip-primary">
    <span class="chip-label">Etichetta con link</span>
  </a>
  <a href="#" class="chip chip-secondary">
    <span class="chip-label">Etichetta con link</span>
  </a>
  <a href="#" class="chip chip-success">
    <span class="chip-label">Etichetta con link</span>
  </a>
  <a href="#" class="chip chip-warning">
    <span class="chip-label">Etichetta con link</span>
  </a>
  <a href="#" class="chip chip-danger">
    <span class="chip-label">Etichetta con link</span>
  </a>

Varianti di colore

Gli stili definiti da Bootstrap Italia utilizzano un naming consistente con i temi di Bootstrap:

Primary
Secondary
Success
Danger
Warning 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="chip chip-primary">
  <span class="chip-label">Primary</span>
</div>

<div class="chip chip-secondary">
  <span class="chip-label">Secondary</span>
</div>

<div class="chip chip-success">
  <span class="chip-label">Success</span>
</div>

<div class="chip chip-danger">
  <span class="chip-label">Danger</span>
</div>

<div class="chip chip-warning">
  <span class="chip-label">Warning</span>
</div>
Primary Secondary Success Danger Warning 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<a class="chip chip-primary" href="#">
  <span class="chip-label">Primary</span>
</a>


<a class="chip chip-secondary" href="#">
  <span class="chip-label">Secondary</span>
</a>


<a class="chip chip-success" href="#">
  <span class="chip-label">Success</span>
</a>


<a class="chip chip-danger" href="#">
  <span class="chip-label">Danger</span>
</a>


<a class="chip chip-warning" href="#">
  <span class="chip-label">Warning</span>
</a>

Chip Disabilitata

Aggiungendo la classe .chip-disabled al contenitore e l’attributo disabled al <button> si ottiene una chip disabilitata.

Etichetta
Etichetta
Etichetta
Mario Rossi
Etichetta 

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

<div class="chip chip-disabled">
  <span class="chip-label">Etichetta</span>
</div>

<div class="chip chip-disabled">
  <span class="chip-label">Etichetta</span>
  <button disabled data-bs-dismiss='chip'>
    <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
    <span class="visually-hidden">Elimina etichetta</span>
  </button>
</div>

<div class="chip chip-disabled">
  <svg class="icon icon-xs"><use href="/dist/svg/sprites.svg#it-github"></use></svg>
  <span class="chip-label">Etichetta</span>
  <button data-bs-dismiss='chip'>
    <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
    <span class="visually-hidden">Elimina etichetta</span>
  </button>
</div>

<div class="chip chip-disabled">
  <div class="avatar size-xs">
    <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
  </div>
  <span class="chip-label">Etichetta</span>
  <button data-bs-dismiss='chip'>
    <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
    <span class="visually-hidden">Elimina etichetta</span>
  </button>
</div>

Gruppi di Chip

I gruppi di chip vengono visualizzati in linea.

Label
Label
Label
Mario Rossi
Label
Label
Label
Label
Mario Rossi
Label 

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<div class="bg-white p-4">
  <div class="chip">
    <span class="chip-label">Label</span>
  </div>
  <div class="chip">
    <span class="chip-label">Label</span>
    <button>
      <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
      <span class="visually-hidden">Elimina label</span>
    </button>
  </div>
  <div class="chip">
    <svg class="icon icon-xs"><use href="/dist/svg/sprites.svg#it-github"></use></svg>
    <span class="chip-label">Label</span>
    <button>
      <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
      <span class="visually-hidden">Elimina label</span>
    </button>
  </div>
  <div class="chip">
    <div class="avatar size-xs">
      <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
    </div>
    <span class="chip-label">Label</span>
    <button>
      <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
      <span class="visually-hidden">Elimina label</span>
    </button>
  </div>

  <hr/>

  <div class="chip chip-lg">
    <span class="chip-label">Label</span>
  </div>
  <div class="chip chip-lg">
    <span class="chip-label">Label</span>
    <button>
      <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
      <span class="visually-hidden">Elimina label</span>
    </button>
  </div>
  <div class="chip chip-lg">
    <svg class="icon icon-xs"><use href="/dist/svg/sprites.svg#it-github"></use></svg>
    <span class="chip-label">Label</span>
    <button>
      <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
      <span class="visually-hidden">Elimina label</span>
    </button>
  </div>
  <div class="chip chip-lg">
    <div class="avatar size-xs">
      <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
    </div>
    <span class="chip-label">Label</span>
    <button>
      <svg class="icon icon-md"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
      <span class="visually-hidden">Elimina label</span>
    </button>
  </div>

</div>
Label Label Label Label
Etichetta Etichetta
Mario Rossi
Etichetta 

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
39
40

<a href="#" class="chip chip-primary">
  <span class="chip-label">Label</span>
</a>
<a href="#" class="chip chip-primary">
  <span class="chip-label">Label</span>
</a>
<a href="#" class="chip chip-primary">
  <span class="chip-label">Label</span>
</a>
<a href="#" class="chip chip-primary">
  <span class="chip-label">Label</span>
</a>

<hr/>

<a href="#" class="chip chip-lg chip-primary">
  <span class="chip-label">Etichetta</span>
  <button>
    <svg class="icon icon-sm"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
    <span class="visually-hidden">Etichetta</span>
  </button>
</a>
<a href="#" class="chip chip-lg chip-primary">
  <svg class="icon icon-xs"><use href="/dist/svg/sprites.svg#it-github"></use></svg>
  <span class="chip-label">Etichetta</span>
  <button>
    <svg class="icon icon-md"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
    <span class="visually-hidden">Elimina etichetta</span>
  </button>
</a>
<a href="#" class="chip chip-lg chip-primary">
  <div class="avatar size-xs">
    <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
  </div>
  <span class="chip-label">Etichetta</span>
  <button>
    <svg class="icon icon-md"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
    <span class="visually-hidden">Elimina etichetta</span>
  </button>
</a>

Properties

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-chip-background-color Controls the background color for the chip, using color tokens. var(--bsi-color-background-muted)
--bsi-chip-border-color Controls the border color for the chip, using color tokens. var(--bsi-color-border-subtle)
--bsi-chip-border-radius Controls the border radius for the chip, using radius tokens. var(--bsi-radius-rounded)
--bsi-chip-border-width Controls the border width for the chip. 1px
--bsi-chip-icon-color Controls the icon color for the chip, using icon tokens. var(--bsi-icon-secondary)
--bsi-chip-link-hover Controls the link hover color for the chip, using color tokens. var(--bsi-color-text-inverse)
--bsi-chip-padding-x Controls the horizontal padding for the chip, using spacing tokens. var(--bsi-spacing-xs)
--bsi-chip-padding-y Controls the vertical padding for the chip, using spacing tokens. var(--bsi-spacing-3xs)
--bsi-chip-text-color Controls the text color for the chip, using color tokens. var(--bsi-color-text-secondary)
--bsi-chip-text-line-height Controls the text line height for the chip, using font tokens. var(--bsi-label-leading)
--bsi-chip-text-size Controls the text size for the chip, using font tokens. var(--bsi-label-font-size)
--bsi-chip-text-weight Controls the text weight for the chip, using font tokens. var(--bsi-font-weight-solid)

Breaking change

  • È stata rimossa la classe .chip-simple.
  • Nelle chip con pulsante di chiusura il tag <label> diventa <span>.
  • Alle icone del pulsante di chiusura per le chip con classe .chip-lg viene aggiunta la classe .icon-md.