Componente

Chip

Etichette a pillola per argomenti e filtri: daisyUI badge ingrandito a 32/40px, con icona, avatar e chiusura opzionali.

Riferimento: <it-chip>
Classi: ita-chipita-chip-primaryita-chip-secondaryita-chip-successita-chip-dangerita-chip-warningita-chip-lgita-chip-avatarita-chip-close
Basato su (daisyUI): badge
Solo CSS: La chiusura nasconde la chip con il checkbox di ita-chip-close (ita-chip:has(… input:checked)); senza JavaScript il focus non si sposta. aria-disabled="true" la rende grigia.
Storybook: Apri le storie di Chip

Varianti di colore

Etichetta Etichetta Etichetta Etichetta Etichetta Etichetta

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-4">
  <span class="ita-chip"><span>Etichetta</span></span>
  <span class="ita-chip ita-chip-primary"><span>Etichetta</span></span>
  <span class="ita-chip ita-chip-secondary"><span>Etichetta</span></span>
  <span class="ita-chip ita-chip-success"><span>Etichetta</span></span>
  <span class="ita-chip ita-chip-danger"><span>Etichetta</span></span>
  <span class="ita-chip ita-chip-warning"><span>Etichetta</span></span>
</div>

Variante con link

Le chip link si riempiono al passaggio del mouse.

Etichetta Etichetta Etichetta Etichetta Etichetta Etichetta

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-4">
  <a href="#" class="ita-chip"><span>Etichetta</span></a>
  <a href="#" class="ita-chip ita-chip-primary"><span>Etichetta</span></a>
  <a href="#" class="ita-chip ita-chip-secondary"><span>Etichetta</span></a>
  <a href="#" class="ita-chip ita-chip-success"><span>Etichetta</span></a>
  <a href="#" class="ita-chip ita-chip-danger"><span>Etichetta</span></a>
  <a href="#" class="ita-chip ita-chip-warning"><span>Etichetta</span></a>
</div>

Varianti di dimensione

Etichetta sm Etichetta lg

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-4">
  <span class="ita-chip ita-chip-primary"><span>Etichetta sm</span><label class="ita-chip-close"><input type="checkbox" class="sr-only"><span class="sr-only">Elimina etichetta</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l3.7,3.6l-0.8,0.8L12,12.7l-3.6,3.7l-0.8-0.8l3.7-3.6L7.6,8.4l0.8-0.8l3.6,3.7l3.6-3.7l0.8,0.8L12.7,12z" /></svg></label></span>
  <span class="ita-chip ita-chip-primary ita-chip-lg"><span>Etichetta lg</span><label class="ita-chip-close"><input type="checkbox" class="sr-only"><span class="sr-only">Elimina etichetta</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l3.7,3.6l-0.8,0.8L12,12.7l-3.6,3.7l-0.8-0.8l3.7-3.6L7.6,8.4l0.8-0.8l3.6,3.7l3.6-3.7l0.8,0.8L12.7,12z" /></svg></label></span>
</div>

Chip con chiusura

Etichetta Etichetta Etichetta

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-4">
  <span class="ita-chip"><span>Etichetta</span><label class="ita-chip-close"><input type="checkbox" class="sr-only"><span class="sr-only">Elimina etichetta</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l3.7,3.6l-0.8,0.8L12,12.7l-3.6,3.7l-0.8-0.8l3.7-3.6L7.6,8.4l0.8-0.8l3.6,3.7l3.6-3.7l0.8,0.8L12.7,12z" /></svg></label></span>
  <span class="ita-chip ita-chip-primary"><span>Etichetta</span><label class="ita-chip-close"><input type="checkbox" class="sr-only"><span class="sr-only">Elimina etichetta</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l3.7,3.6l-0.8,0.8L12,12.7l-3.6,3.7l-0.8-0.8l3.7-3.6L7.6,8.4l0.8-0.8l3.6,3.7l3.6-3.7l0.8,0.8L12.7,12z" /></svg></label></span>
  <span class="ita-chip ita-chip-secondary"><span>Etichetta</span><label class="ita-chip-close"><input type="checkbox" class="sr-only"><span class="sr-only">Elimina etichetta</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l3.7,3.6l-0.8,0.8L12,12.7l-3.6,3.7l-0.8-0.8l3.7-3.6L7.6,8.4l0.8-0.8l3.6,3.7l3.6-3.7l0.8,0.8L12.7,12z" /></svg></label></span>
</div>

Chip disabilitata

Etichetta MRMario Rossi

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-4">
  <span class="ita-chip" aria-disabled="true"><span>Etichetta</span></span>
  <span class="ita-chip" aria-disabled="true"><span class="ita-chip-avatar">MR</span><span>Mario Rossi</span><label class="ita-chip-close"><input type="checkbox" class="sr-only" disabled><span class="sr-only">Elimina etichetta</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l3.7,3.6l-0.8,0.8L12,12.7l-3.6,3.7l-0.8-0.8l3.7-3.6L7.6,8.4l0.8-0.8l3.6,3.7l3.6-3.7l0.8,0.8L12.7,12z" /></svg></label></span>
</div>

Chip con avatar

MRMario Rossi AVAnna Verdi

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-4">
  <span class="ita-chip ita-chip-primary"><span class="ita-chip-avatar">MR</span><span>Mario Rossi</span><label class="ita-chip-close"><input type="checkbox" class="sr-only"><span class="sr-only">Rimuovi Mario Rossi</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l3.7,3.6l-0.8,0.8L12,12.7l-3.6,3.7l-0.8-0.8l3.7-3.6L7.6,8.4l0.8-0.8l3.6,3.7l3.6-3.7l0.8,0.8L12.7,12z" /></svg></label></span>
  <span class="ita-chip ita-chip-secondary ita-chip-lg"><span class="ita-chip-avatar">AV</span><span>Anna Verdi</span><label class="ita-chip-close"><input type="checkbox" class="sr-only"><span class="sr-only">Rimuovi Anna Verdi</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l3.7,3.6l-0.8,0.8L12,12.7l-3.6,3.7l-0.8-0.8l3.7-3.6L7.6,8.4l0.8-0.8l3.6,3.7l3.6-3.7l0.8,0.8L12.7,12z" /></svg></label></span>
</div>

Chip con icona

Download Carica file Preferiti

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-4">
  <span class="ita-chip ita-chip-primary"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,14.2L7.7,9.9l0.7-0.7l3.1,3.1V3h1v9.2l3.1-3l0.7,0.7L12,14.2z M19,12v7.5c0,0.3-0.2,0.5-0.5,0.5h-13 C5.2,20,5,19.8,5,19.5V12H4v7.5C4,20.3,4.7,21,5.5,21h13c0.8,0,1.5-0.7,1.5-1.5V12H19z" /></svg><span>Download</span></span>
  <span class="ita-chip ita-chip-success ita-chip-lg"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8.4,7.3L7.7,6.6L12,2.3l4.3,4.3l-0.7,0.7l-3.1-3.1v9.3h-1V4.2L8.4,7.3z M19,12v7.5c0,0.3-0.2,0.5-0.5,0.5h-13 C5.2,20,5,19.8,5,19.5V12H4v7.5C4,20.3,4.7,21,5.5,21h13c0.8,0,1.5-0.7,1.5-1.5V12H19z" /></svg><span>Carica file</span></span>
  <a href="#" class="ita-chip ita-chip-warning"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,1.7L9.5,9.2H1.6L8,13.9l-2.4,7.6l6.4-4.7l6.4,4.7L16,13.9l6.4-4.7h-7.9L12,1.7z" /></svg><span>Preferiti</span></a>
</div>