Componente

Button

Pulsanti per azioni: ita-btn più la variante di colore. Sotto c'è daisyUI btn, con il peso 600, il testo a 16px e lo spazio per le icone di .italia.

Riferimento: <it-button>
Classi: ita-btnita-btn-primaryita-btn-secondaryita-btn-successita-btn-dangerita-btn-warningita-btn-linkita-btn-outlineita-btn-lgita-btn-xsita-btn-blockita-btn-icon
Basato su (daisyUI): btnbtn-primarybtn-outlinebtn-linkbtn-lgbtn-smbtn-blockbadge
Storybook: Apri le storie di Button

Varianti di colore

Mostra il codice HTML

<div class="flex flex-col gap-4">
<div class="flex flex-wrap items-center gap-3">
  <button type="button" class="ita-btn ita-btn-primary"><span>Primary</span></button>
  <button type="button" class="ita-btn ita-btn-secondary"><span>Secondary</span></button>
  <button type="button" class="ita-btn ita-btn-success"><span>Success</span></button>
  <button type="button" class="ita-btn ita-btn-danger"><span>Danger</span></button>
  <button type="button" class="ita-btn ita-btn-warning"><span>Warning</span></button>
</div>
<div class="flex flex-wrap items-center gap-3">
  <button type="button" class="ita-btn ita-btn-primary ita-btn-outline"><span>Primary outline</span></button>
  <button type="button" class="ita-btn ita-btn-secondary ita-btn-outline"><span>Secondary outline</span></button>
  <button type="button" class="ita-btn ita-btn-success ita-btn-outline"><span>Success outline</span></button>
  <button type="button" class="ita-btn ita-btn-danger ita-btn-outline"><span>Danger outline</span></button>
  <button type="button" class="ita-btn ita-btn-warning ita-btn-outline"><span>Warning outline</span></button>
</div>
</div>

Stato disabilitato

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-3">
  <button type="button" class="ita-btn ita-btn-primary" disabled><span>Primary</span></button>
  <button type="button" class="ita-btn ita-btn-secondary" disabled><span>Secondary</span></button>
  <button type="button" class="ita-btn ita-btn-success" disabled><span>Success</span></button>
  <button type="button" class="ita-btn ita-btn-danger" disabled><span>Danger</span></button>
  <button type="button" class="ita-btn ita-btn-warning" disabled><span>Warning</span></button>
  <button type="button" class="ita-btn ita-btn-link" disabled><span>Pulsante link</span></button>
</div>

Varianti di dimensione

Mostra il codice HTML

<div class="flex flex-col gap-4">
<div class="flex flex-wrap items-center gap-3">
  <button type="button" class="ita-btn ita-btn-primary ita-btn-lg"><span>Primary Large</span></button>
  <button type="button" class="ita-btn ita-btn-secondary ita-btn-lg"><span>Secondary Large</span></button>
</div>
<div class="flex flex-wrap items-center gap-3">
  <button type="button" class="ita-btn ita-btn-primary"><span>Primary Default</span></button>
  <button type="button" class="ita-btn ita-btn-primary ita-btn-xs"><span>Primary Extra Small</span></button>
</div>
<button type="button" class="ita-btn ita-btn-primary ita-btn-block"><span>Primary Block</span></button>
<button type="button" class="ita-btn ita-btn-secondary ita-btn-block"><span>Secondary Block</span></button>
</div>

Con icona

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-3">
  <button type="button" class="ita-btn ita-btn-success ita-btn-lg"><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>Pulsante Large con icona</span></button>
  <button type="button" class="ita-btn ita-btn-primary"><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>Pulsante con icona</span></button>
  <button type="button" class="ita-btn ita-btn-danger ita-btn-xs"><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>Pulsante Extra Small con icona</span></button>
  <button type="button" class="ita-btn ita-btn-link ita-btn-xs"><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>Pulsante Link Extra Small con icona</span></button>
</div>

Con icona cerchiata

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-3">
  <button type="button" class="ita-btn ita-btn-success ita-btn-lg"><span class="ita-btn-icon"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,13c2.2,0,4-1.8,4-4V6c0-2.2-1.8-4-4-4S8,3.8,8,6v3C8,11.2,9.8,13,12,13z M9,6c0-1.7,1.3-3,3-3s3,1.3,3,3v3 c0,1.7-1.3,3-3,3s-3-1.3-3-3V6z M20,22h-1c0-3.9-3.1-7-7-7s-7,3.1-7,7H4c0-4.4,3.6-8,8-8S20,17.6,20,22z" /></svg></span><span>Pulsante Large con icona</span></button>
  <button type="button" class="ita-btn ita-btn-primary"><span class="ita-btn-icon"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,13c2.2,0,4-1.8,4-4V6c0-2.2-1.8-4-4-4S8,3.8,8,6v3C8,11.2,9.8,13,12,13z M9,6c0-1.7,1.3-3,3-3s3,1.3,3,3v3 c0,1.7-1.3,3-3,3s-3-1.3-3-3V6z M20,22h-1c0-3.9-3.1-7-7-7s-7,3.1-7,7H4c0-4.4,3.6-8,8-8S20,17.6,20,22z" /></svg></span><span>Pulsante con icona</span></button>
  <button type="button" class="ita-btn ita-btn-danger ita-btn-xs"><span class="ita-btn-icon"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,13c2.2,0,4-1.8,4-4V6c0-2.2-1.8-4-4-4S8,3.8,8,6v3C8,11.2,9.8,13,12,13z M9,6c0-1.7,1.3-3,3-3s3,1.3,3,3v3 c0,1.7-1.3,3-3,3s-3-1.3-3-3V6z M20,22h-1c0-3.9-3.1-7-7-7s-7,3.1-7,7H4c0-4.4,3.6-8,8-8S20,17.6,20,22z" /></svg></span><span>Pulsante Extra Small</span></button>
</div>

Con badge

Mostra il codice HTML

<button type="button" class="ita-btn ita-btn-primary gap-2">
  Notifiche <span class="ita-badge ita-badge-inverse">4</span>
  <span class="sr-only">Messaggi non letti</span>
</button>

Il contenitore ha la classe it-surface-primary: i token si scambiano (base diventa primary, primary diventa primary-content) e il componente si adatta senza opzioni. Il primary pieno diventa chiaro con testo primary, come in bootstrap-italia.

Mostra il codice HTML

<div class="it-surface-primary rounded-box p-6">
  <div class="flex flex-wrap items-center gap-3">
  <button type="button" class="ita-btn ita-btn-primary"><span>Primary</span></button>
  <button type="button" class="ita-btn ita-btn-secondary"><span>Secondary</span></button>
  <button type="button" class="ita-btn ita-btn-primary ita-btn-outline"><span>Primary outline</span></button>
  <button type="button" class="ita-btn ita-btn-link"><span>Link</span></button>
</div>
</div>

Tipologie

Link come pulsante

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-3">
  <button type="button" class="ita-btn ita-btn-primary"><span>Button - Primary</span></button>
  <button type="submit" class="ita-btn ita-btn-primary"><span>Submit - Primary</span></button>
  <button type="reset" class="ita-btn ita-btn-secondary ita-btn-outline"><span>Reset - Secondary</span></button>
  <a href="#" class="ita-btn ita-btn-primary"><span>Link come pulsante</span></a>
</div>