import{S as a}from"./Icons-BeoYqvjW.js";import"./index-Db-Rg6tG.js";import"./iframe-B5m-NN6C.js";import"./index-C__6K5js.js";import"./index-DrFu-skq.js";const v=[{label:"primary",value:"btn-primary"},{label:"success",value:"btn-primary btn-success"}],I=({disabilitato:i,coloreBackground:o,label:b,onClick:z,preIcon:r,postIcon:l,variante:g,posizione:s})=>{const e=document.createElement("button");e.type="button",e.innerText=b,e.addEventListener("click",z);let n=v.find(f=>f.label===o);e.className=["btn",g!=="link"?n!=null&&n.value?i?"btn-primary disabled":`${n==null?void 0:n.value}`:i?"btn-primary disabled":"":i?"btn-link disabled":"btn-link",s?`pull-${s}`:null].join(" "),e.disabled=i;var c=document.createElement("i"),d=document.createElement("i");return r&&r!=="none"?(c.className=a[r].class,e.insertBefore(c,e.firstChild)):e.removeAttribute("iconBefore"),l&&l!=="none"?(d.className=a[l].class,e.appendChild(d)):e.removeAttribute("iconAfter"),e},A=`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-inline-feedback--loading)
- disattivare il tasto per evitare ulteriori click. 
`,y=`**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.
`,B={title:"Components/Tasti e link/Button",tags:["autodocs"],render:({label:i,...o})=>I({label:i,...o}),argTypes:{coloreBackground:{control:"select",options:["primary","success"],description:"Colore del background del button",table:{defaultValue:{summary:"primary"}}},label:{control:"text",description:"Label del button",table:{defaultValue:{summary:"Button"}}},onClick:{action:"onClick",description:"Evento di click del button."},disabilitato:{control:"boolean",table:{defaultValue:{summary:!1}},description:"Disabilita il button e previene ogni interazione."},posizione:{control:{type:"select"},options:["right","left"],table:{defaultValue:{summary:"left"}},description:"Posiziona il button a sinistra o destra."},preIcon:{control:{type:"select"},options:[...Object.keys(a),"none"],description:"Nome dell'icona a sinistra del button."},postIcon:{control:{type:"select"},options:[...Object.keys(a),"none"],description:"Nome dell'icona a destra del button."},variante:{control:{type:"select"},options:["contained","link"],table:{defaultValue:{summary:"contained"}},description:"Variazione di stile del button. Contained: con bordi e colore di sfondo. Link: senza bordi e colore di sfondo."}},parameters:{docs:{description:{component:y},mdxPage:A}}},t={name:"Button",args:{disabilitato:!1,coloreBackground:"primary",label:"Button",posizione:"left",variante:"contained"}};var u,p,m;t.parameters={...t.parameters,docs:{...(u=t.parameters)==null?void 0:u.docs,source:{originalSource:`{
  name: "Button",
  args: {
    disabilitato: false,
    coloreBackground: "primary",
    label: "Button",
    posizione: "left",
    variante: "contained"
  }
}`,...(m=(p=t.parameters)==null?void 0:p.docs)==null?void 0:m.source}}};const T=["Buttons"];export{t as Buttons,T as __namedExportsOrder,B as default};
