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

Label

Testo e chiusura

Label

Icona, testo e chiusura

Label

Avatar, testo e chiusura

Label

Solo testo grande

Label

Testo e chiusura grande

Label

Icona, testo e chiusura grande

Label

Avatar, testo e chiusura grande

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
63
64
65
66
67
68
69
70
<div class="row">
  <div class="col-12 col-md-6">
    <p class="mt-4 mb-2">Solo testo</p>
    <div class="chip chip-simple">
      <span class="chip-label">Label</span>
    </div>
    <p class="mt-4 mb-2">Testo e chiusura</p>
    <div class="chip alert">
      <span class="chip-label">Label</span>
      <button  data-bs-dismiss='alert'>
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina label</span>
      </button>
    </div>
    <p class="mt-4 mb-2">Icona, testo e chiusura</p>
    <div class="chip alert">
      <svg class="icon icon-xs"><use href="/dist/svg/sprites.svg#it-github"></use></svg>
      <span class="chip-label">Label</span>
      <button data-bs-dismiss='alert'>
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina label</span>
      </button>
    </div>
    <p class="mt-4 mb-2">Avatar, testo e chiusura</p>
    <div class="chip alert">
      <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 data-bs-dismiss='alert'>
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina label</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-simple chip-lg">
      <span class="chip-label">Label</span>
    </div>
    <p class="mt-4 mb-2">Testo e chiusura grande</p>
    <div class="chip chip-lg alert">
      <span class="chip-label">Label</span>
      <button data-bs-dismiss='alert'>
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina label</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-xs"><use href="/dist/svg/sprites.svg#it-github"></use></svg>
      <span class="chip-label">Label</span>
      <button data-bs-dismiss='alert'>
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina label</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-xs">
        <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Mario Rossi">
      </div>
      <span class="chip-label">Label</span>
      <button data-bs-dismiss='alert'>
        <svg class="icon"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
        <span class="visually-hidden">Elimina label</span>
      </button>
    </div>
  </div>
</div>

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 chip-lg chip-simple">
  <span class="chip-label">Primary</span>
</div>

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

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

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

<div class="chip chip-warning chip-lg chip-simple">
  <span class="chip-label">Warning</span>
</div>

Chip Disabilitata

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

Label disabilitata

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-simple chip-lg chip-disabled">
  <span class="chip-label">Label disabilitata</span>
</div>

<div class="chip chip-lg chip-disabled">
  <label class="chip-label" for="chip-01">Label disabilitata</label>
  <button id="chip-01" disabled>
    <svg class="icon"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
    <span class="visually-hidden">Elimina label</span>
  </button>
</div>

<div class="chip chip-lg chip-disabled">
  <svg class="icon icon-xs"><use href="/dist/svg/sprites.svg#it-github"></use></svg>
  <label class="chip-label" for="chip-02">Label disabilitata</label>
  <button id="chip-02" disabled>
    <svg class="icon"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
    <span class="visually-hidden">Elimina label</span>
  </button>
</div>

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

Gruppi di Chip

I gruppi di chip vengono visualizzati in linea.

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
<div class="chip chip-simple">
  <span class="chip-label">Label</span>
</div>
<div class="chip">
  <span class="chip-label">Label</span>
  <button>
    <svg class="icon"><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"><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"><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 chip-simple">
  <span class="chip-label">Label</span>
</div>
<div class="chip chip-lg">
  <span class="chip-label">Label</span>
  <button>
    <svg class="icon"><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"><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"><use href="/dist/svg/sprites.svg#it-close"></use></svg>
    <span class="visually-hidden">Elimina label</span>
  </button>
</div>