— COMPONENTI

Pulsanti

I pulsanti sono elementi cliccabili utilizzati dall'utente che lo invitano all'azione e consentono la navigazione con le pagine in modi diversi. Le etichette dei pulsanti esprimono quale azione si verificherà quando l'utente interagisce con esso. Ogni pulsante di questo Design System segue forme geometriche semplici ma ben definite, quali rettangoli e quadrati.


<button class="btn">BUTTON</button>
Pulsanti standard

Ogni pagina dovrebbe avere un pulsante principale (btnPrimary), e qualsiasi altro invito all'azione rimanente dovrebbe essere rappresentato da pulsanti di enfasi inferiore (btnBasic). Al passaggio del mouse di ogni pulsante (:hover), esso assumerà una tonalità più scura del colore stesso.


<button class="btn classeDelPulsante">BUTTON</button>

btnBasic
btnPrimary
btnSuccess
btnWarning
btnDanger
btnInfo

Pulsanti outline

I pulsanti outline possono essere utilizzati isolatamente o associati a un pulsante principale quando sono presenti più inviti all'azione.

btnBasicOutline
btnPrimaryOutline
btnSuccessOutline
btnWarningOutline
btnDangerOutline
btnInfoOutline

Pulsanti ed icone

Si possono includere anche delle icone all'interno di un pulsante per rafforzare l'azione: per una maggiore leggibilità, è consigliabile che l'icona sia allineata a destra e l'etichetta di testo a sinistra.

<button class="btn btnPrimary">REGISTRATI
  <svg class="icon icon-user">
  <use xlink:href="#icon-user"></use>
  </svg>
</button>

<button class="btn btnBasic">ACCEDI
  <svg class="icon icon-arrow-right">
  <use xlink:href="#icon-arrow-right"></use>
  </svg>
</button>

<button class="btnIcon btnWarning">
  <svg class="icon icon-email">
  <use xlink:href="#icon-email"></use>
  </svg>
</button>

Pulsanti raggruppati e disabilitati

I pulsanti raggruppati possono essere utilizzati quando c'è la necessità di eseguire più azioni. Puoi anche decidere se utilizzare la versione small (-s) o large (-l).

<div class="btnGroup">
  <button class="btnIcon btnBasic">
    <svg class="icon icon-arrow-left"><use xlink:href="#icon-arrow-left"></use></svg>
  </button>

  <button class="btnIcon btnBasic">1</button>
  <button class="btnIcon btnBasic">2</button>
  <button class="btnIcon btnBasic">3</button>

  <button class="btnIcon btnBasic">
    <svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg>
  </button>
</div>

<div class="btnGroup">
  <button class="btnIcon-s btnPrimary">Precedente</button>
  <button class="btnIcon-s btnPrimary">1</button>
  <button class="btnIcon-s btnPrimary">2</button>
  <button class="btnIcon-s btnPrimary">3</button>
  <button class="btnIcon-s btnPrimary">Successivo</button>
</div>


<div class="btnGroup">
  <button class="btnIcon-l btnPrimary">
    <svg class="icon icon-arrow-left"><use xlink:href="#icon-arrow-left"></use></svg>
  </button>

  <button class="btnIcon-l btnPrimary">1</button>
  <button class="btnIcon-l btnPrimary">2</button>
  <button class="btnIcon-l btnPrimary">3</button>

  <button class="btnIcon-l btnPrimary">
    <svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg>
  </button>
</div>


L'attributo disabled può essere impostato per impedire a un utente di fare clic sul pulsante fino a quando non viene soddisfatta qualche altra condizione (come la selezione di una casella di controllo, etc).

<button disabled class="btn btnDisabled">PULSANTE DISABILITATO</button>