Componente

Badge

Piccole etichette di conteggio o stato. Il testo è 0.75em, quindi il badge scala con il testo che lo contiene.

Riferimento: .badge (bootstrap-italia)
Classi: ita-badgeita-badge-primaryita-badge-secondaryita-badge-successita-badge-dangerita-badge-warningita-badge-inverseita-badge-pill
Basato su (daisyUI): badgebadge-primarybadge-secondary
Storybook: Apri le storie di Badge

Dimensione

Titolo di esempio h1 New

Titolo di esempio h2 New

Titolo di esempio h3 New

Titolo di esempio h4 New

Titolo di esempio h5 New

Titolo di esempio h6 New

Mostra il codice HTML

<p class="text-5xl font-bold">Titolo di esempio h1 <span class="ita-badge ita-badge-secondary">New</span></p>
<p class="text-4xl font-bold">Titolo di esempio h2 <span class="ita-badge ita-badge-secondary">New</span></p>
<p class="text-3xl font-bold">Titolo di esempio h3 <span class="ita-badge ita-badge-secondary">New</span></p>
<p class="text-2xl font-bold">Titolo di esempio h4 <span class="ita-badge ita-badge-secondary">New</span></p>
<p class="text-xl font-bold">Titolo di esempio h5 <span class="ita-badge ita-badge-secondary">New</span></p>
<p class="text-base font-bold">Titolo di esempio h6 <span class="ita-badge ita-badge-secondary">New</span></p>

Variazioni di colore

Primary Secondary Success Danger Warning

Mostra il codice HTML

<div class="flex flex-wrap gap-3">
  <span class="ita-badge ita-badge-primary">Primary</span>
  <span class="ita-badge ita-badge-secondary">Secondary</span>
  <span class="ita-badge ita-badge-success">Success</span>
  <span class="ita-badge ita-badge-danger">Danger</span>
  <span class="ita-badge ita-badge-warning">Warning</span>
</div>

Badge arrotondati

Primary Secondary Success Danger Warning

Mostra il codice HTML

<div class="flex flex-wrap gap-3">
  <span class="ita-badge ita-badge-primary ita-badge-pill">Primary</span>
  <span class="ita-badge ita-badge-secondary ita-badge-pill">Secondary</span>
  <span class="ita-badge ita-badge-success ita-badge-pill">Success</span>
  <span class="ita-badge ita-badge-danger ita-badge-pill">Danger</span>
  <span class="ita-badge ita-badge-warning ita-badge-pill">Warning</span>
</div>

Link

Primary Secondary Success Danger Warning

Mostra il codice HTML

<div class="flex flex-wrap gap-3">
  <a href="#" class="ita-badge ita-badge-primary">Primary</a>
  <a href="#" class="ita-badge ita-badge-secondary">Secondary</a>
  <a href="#" class="ita-badge ita-badge-success">Success</a>
  <a href="#" class="ita-badge ita-badge-danger">Danger</a>
  <a href="#" class="ita-badge ita-badge-warning">Warning</a>
</div>