import{S as u}from"./Icons-DFTYvulb.js";function m({disabilitato:i,isCompleta:t,iconaSinistra:n,iconaDestra:a,align:e,buttonLabel:o}){const s=["inail-button inail-button-primary",t?"inail-button-complete":"",e=="pull-right"?"pull-right":"pull-left"].filter(Boolean).join(" "),l=r(n),c=r(a,!0);return`
  <button type="submit" class="${s}" ${i?"disabled":""}>
${l?`${l}
`:""}${o}
${c?`${c}
`:""}</button>`.trim()}function r(i,t=!1){if(!i||i==="none")return"";const n=b(i),a=p(i);return`
    <span class="${n} ${t?"right":""}" title = "${a}" > </span>`}function b(i){return u[i]?.class||""}function p(i){return u[i]?.functionality||""}function g(){return`
  
  <button disabled type="submit" class="inail-button">Conferma</button>
  `}function f({disabilitato:i,isCompleta:t,iconaSinistra:n,iconaDestra:a,align:e,buttonLabel:o}){return`

  <button type="button" data-toggle="tooltip" data-original-title="Scarica allegato" aria-label="Scarica allegato" data-placement="right" class="inail-button inail-button-primary inail-button-icon">
    <span class="fa fa-download"> </span>
  </button>
  `}function z({disabilitato:i,isCompleta:t,iconaSinistra:n,iconaDestra:a,align:e,buttonLabel:o}){return`
  <button type="submit" class="inail-button inail-button-primary inail-button-icon pull-left"><span class="fa fa-check"> </span> Conferma</button>
  `}function I({disabilitato:i,isCompleta:t,iconaSinistra:n,iconaDestra:a,align:e,buttonLabel:o}){return`
  <button type="submit" class="inail-button inail-button-primary inail-button-icon pull-right">Conferma <span class="fa fa-check"> </span></button>
  `}function S(){return`
  
  <button disabled type="button" class="inail-button inail-button-primary inail-button-icon" aria-label="Scarica allegato">
    <span class="fa fa-download"> </span>
  </button>
  `}function h({disabilitato:i,isCompleta:t,iconaSinistra:n,iconaDestra:a,align:e,buttonLabel:o}){return`
  <button type="submit" class="inail-button inail-button-complete">Completa</button>
  `}function v({disabilitato:i,iconaSinistra:t,iconaDestra:n,align:a,buttonLabel:e}){const o=["inail-button inail-button-secondary",a=="pull-right"?"pull-right":"pull-left"].filter(Boolean).join(" "),s=r(t),l=r(n,!0);return`
  <button type="submit" class="${o}" ${i?"disabled":""}>
${s?`${s}
`:""}${e}
${l?`${l}
`:""}</button>`.trim()}function y(){return`
  
  <button type="button" class="inail-button inail-button-secondary" disabled>Indietro</button>`}function C({disabilitato:i,isCompleta:t,iconaSinistra:n,iconaDestra:a,align:e,buttonLabel:o}){return`
  <button type="button" class="inail-button inail-button-secondary inail-button-icon" data-toggle="tooltip" data-original-title="Scarica allegato" aria-label="Scarica allegato" data-placement="right">
    <span class="fa fa-download"> </span>
  </button>
  `}function B({disabilitato:i,isCompleta:t,iconaSinistra:n,iconaDestra:a,align:e,buttonLabel:o}){return`
  <button type="button" class="inail-button inail-button-secondary inail-button-icon pull-left"><span class="fa fa-chevron-left"> </span> Indietro</button>
  `}function D({disabilitato:i,isCompleta:t,iconaSinistra:n,iconaDestra:a,align:e,buttonLabel:o}){return`
  <button type="button" class="inail-button inail-button-secondary inail-button-icon pull-right">Avanti <span class="fa fa-chevron-right"> </span></button>
  `}function L(){return`

  <button disabled type="button"  class="inail-button inail-button-secondary inail-button-icon" aria-label="Scarica allegato">
    <span class="fa fa-download"> </span>
  </button>
  `}function A({disabilitato:i,isCompleta:t,iconaSinistra:n,iconaDestra:a,align:e,buttonLabel:o}){return`
  <button type="submit" class="inail-button inail-button-primary pull-right" >Conferma</button>
  `}function R({disabilitato:i,isCompleta:t,iconaSinistra:n,iconaDestra:a,align:e,buttonLabel:o}){return`
  <button type="submit" class="inail-button inail-button-primary pull-left">Conferma</button>
  `}function E({disabilitato:i,isCompleta:t,iconaSinistra:n,iconaDestra:a,align:e,buttonLabel:o}){return`
  <button type="button" class="inail-button inail-button-secondary pull-right">Indietro</button>
  `}function $({disabilitato:i,isCompleta:t,iconaSinistra:n,iconaDestra:a,align:e,buttonLabel:o}){return`
  <button type="button" class="inail-button inail-button-secondary pull-left">Indietro</button>
  `}const P=`I tasti possono essere allineati sia a sinistra che a destra.
Ogni tasto presenta un nome che esplicita la sua funzionalità.
Adiacente ad un tasto può essere presente un'indicazione di testo.

Nel caso in cui a seguito del click su un tasto si preveda un tempo lungo di caricamento, si indica di:
- utilizzare le icone di caricamento riportate all'interno della pagina [Componenti>Box e Tab](?path=/story/components-box-e-tab-rotella-di-caricamento--loading)
- disattivare il tasto per evitare ulteriori click. `,T=`**PANORAMICA**  
- **Descrizione generale**: Il componente Button rappresenta un elemento interattivo che consente agli utenti di eseguire azioni o triggerare eventi all'interno di un'interfaccia web.
- **Funzionalità principali**: Offre un'ampia gamma di varianti stilistiche e dimensioni per adattarsi a diversi contesti d'uso, garantendo coerenza e accessibilità.

**CASO D'USO**  
- **Scenari di utilizzo principali**: Utilizzato per inviare moduli, avviare processi, navigare tra pagine o eseguire qualsiasi azione definita dall'applicazione.
- **Contesto di implementazione consigliato**: Ideale in qualsiasi punto dell'interfaccia dove è richiesta un'interazione utente per eseguire un'azione specifica.
- **Posizionamento ideale nell'interfaccia**: Può essere posizionato in moduli, toolbar, dialoghi o come call-to-action prominente nelle pagine.

**CARATTERISTICHE PRINCIPALI**  
- **Funzionalità chiave**:
  - Supporto per varianti di stile: primario, secondario, successo, pericolo, avviso, informazione, luce, scuro.
  - Dimensioni personalizzabili: piccolo, medio, grande.
  - Stato disabilitato per indicare azioni non disponibili.
- **Aspetti tecnici rilevanti**: Implementato utilizzando l'elemento \`<button>\` o \`<a>\` con ruoli e attributi appropriati per garantire l'accessibilità.
- **Caratteristiche di accessibilità**: Progettato per essere completamente navigabile tramite tastiera e compatibile con screen reader, includendo attributi ARIA quando necessario.

**VARIANTI**  
- **Elenco e descrizione delle varianti disponibili**:
  - Stili: primario, secondario, successo, pericolo, avviso, informazione, luce, scuro.
  - Dimensioni: piccolo, medio, grande.
- **Casi d'uso specifici per ogni variante**:
  - Stili diversi per indicare l'importanza o la natura dell'azione.
  - Dimensioni diverse per adattarsi a spazi specifici nell'interfaccia.

**PROPRIETÀ**  
- **Proprietà configurabili**:
  - \`type\`: specifica il tipo di pulsante (\`button\`, \`submit\`, \`reset\`).
  - \`disabled\`: disabilita l'interazione con il pulsante.
  - \`aria-label\`: fornisce un'etichetta accessibile per il pulsante.
- **Parametri disponibili**: Possibilità di aggiungere attributi personalizzati per estendere la funzionalità.
- **Attributi per l'accessibilità**: Utilizzo di \`aria-label\` o \`aria-labelledby\` per descrivere l'azione del pulsante.

**DETTAGLI DI IMPLEMENTAZIONE**  
- **Struttura HTML**: Il pulsante è rappresentato da un elemento \`<button>\` o \`<a>\` con classi specifiche per lo stile e attributi per l'accessibilità.
- **Stile e CSS utilizzati**: Utilizza classi CSS per gestire il layout e l'aspetto, garantendo coerenza con il design system.
- **Variabili CSS disponibili e loro funzione**:
  - \`--btn-padding\`: padding interno del pulsante.
  - \`--btn-font-size\`: dimensione del testo del pulsante.
  - \`--btn-border-radius\`: raggio dei bordi del pulsante.
  - \`--btn-background-color\`: colore di sfondo del pulsante.
  - \`--btn-text-color\`: colore del testo del pulsante.

**BEST PRACTICES**  
- **Raccomandazioni d'uso**:
  - Utilizzare etichette chiare e concise che descrivano l'azione del pulsante.
  - Assicurarsi che il pulsante sia facilmente identificabile e distinguibile dagli altri elementi.
- **Linee guida implementative**: Evitare di utilizzare pulsanti per navigare tra pagine; preferire link per la navigazione.
- **Pratiche da evitare**: Evitare di utilizzare pulsanti senza etichette o con etichette ambigue.

**LINEE GUIDA PER L'ACCESSIBILITÀ**  
- **Requisiti di accessibilità**: Assicurarsi che il pulsante sia navigabile tramite tastiera e che abbia un'etichetta descrittiva.
- **Supporto tastiera**: Il pulsante deve essere attivabile tramite la barra spaziatrice o Invio.
- **Configurazione screen reader**: Utilizzare attributi ARIA per fornire informazioni sul contesto e la funzione del pulsante.

**COMPONENTI CORRELATI**  
- **Componenti associati**: Button Group, Toolbar, Icon Button.
- **Relazioni con altri elementi**: Spesso utilizzato all'interno di moduli, dialoghi o come call-to-action nelle pagine.
`;export{P as B,T as a,g as b,m as c,f as d,z as e,I as f,S as g,R as h,A as i,h as j,v as k,y as l,C as m,B as n,D as o,L as p,$ as q,E as r};
