# Componente Button

I pulsanti sono componenti interattivi che consentono agli utenti di eseguire azioni come inviare email, condividere documenti o esprimere preferenze.

## Utilizzo {#usage}

Importa il componente:

```js
import 'mdui/components/button.js';
```

Importa il tipo TypeScript:

```ts
import type { Button } from 'mdui/components/button.js';
```

Esempio:

```html
<mdui-button>Pulsante</mdui-button>
```

## Esempi {#examples}

### Variante {#example-variant}

L'attributo `variant` determina l'aspetto del pulsante.

```html
<mdui-button variant="elevated">In rilievo</mdui-button>
<mdui-button variant="filled">Riempito</mdui-button>
<mdui-button variant="tonal">Tonale</mdui-button>
<mdui-button variant="outlined">Con contorno</mdui-button>
<mdui-button variant="text">Testo</mdui-button>
```

### Larghezza intera {#example-full-width}

Aggiungi l'attributo `full-width` per far sì che il pulsante occupi l'intera larghezza del suo contenitore.

```html
<mdui-button full-width>Pulsante</mdui-button>
```

### Icone {#example-icon}

Usa gli attributi `icon` e `end-icon` per aggiungere Icone Material rispettivamente ai lati sinistro e destro del pulsante. Oppure, usa gli slot `icon` e `end-icon` per aggiungere elementi personalizzati ai lati del pulsante.

```html
<mdui-button icon="search" end-icon="arrow_forward">Icona</mdui-button>
<mdui-button>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-button>
```

### Link {#example-link}

Usa l'attributo `href` per trasformare il pulsante in un link. Gli attributi `download`, `target` e `rel` sono disponibili per le normali funzionalità dei link.

```html
<mdui-button href="https://www.mdui.org" target="_blank">Link</mdui-button>
```

### Stato Disabilitato e in Caricamento {#example-disabled}

Usa l'attributo `disabled` per disabilitare il pulsante. L'attributo `loading` visualizza uno stato di caricamento.

```html
<mdui-button disabled>Disabilitato</mdui-button>
<mdui-button loading>Caricamento</mdui-button>
<mdui-button loading disabled>Caricamento e Disabilitato</mdui-button>
```

## mdui-button API

### Proprietà

<table>
<thead>
  <tr>
    <th>Attributo HTML</th>
    <th>Proprietà JavaScript</th>
    <th>Reflect</th>
    <th>Tipo</th>
    <th>Predefinito</th>
    <th>Descrizione</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>variant</td>
    <td>variant</td>
    <td>true</td>
    <td>&#39;elevated&#39; | &#39;filled&#39; | &#39;tonal&#39; | &#39;outlined&#39; | &#39;text&#39;</td>
    <td>'filled'</td>
    <td><p>Variante del pulsante. I valori opzionali includono:</p>
<ul>
<li><code>elevated</code>: pulsante con ombra, utile quando serve separarlo visivamente dallo sfondo</li>
<li><code>filled</code>: aspetto più marcato, adatto all&#39;azione finale di un processo importante, come &quot;Salva&quot; o &quot;Conferma&quot;</li>
<li><code>tonal</code>: aspetto intermedio tra <code>filled</code> e <code>outlined</code>, adatto ad azioni di priorità medio-alta, come &quot;Avanti&quot; in un processo</li>
<li><code>outlined</code>: pulsante con bordo, adatto per azioni di priorità media o secondaria, come &quot;Indietro&quot;</li>
<li><code>text</code>: pulsante testuale, adatto ad azioni di priorità più bassa</li>
</ul>
</td>
  </tr>
  <tr>
    <td>full-width</td>
    <td>fullWidth</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Se deve occupare l&#39;intera larghezza dell&#39;elemento padre</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td>icon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Nome dell&#39;icona Material a sinistra. Può essere specificato anche tramite <code>slot=&quot;icon&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td>endIcon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Nome dell&#39;icona Material a destra. Può essere specificato anche tramite <code>slot=&quot;end-icon&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>href</td>
    <td>href</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>URL di destinazione del collegamento.</p>
<p>Se questa proprietà è impostata, il componente viene renderizzato come elemento <code>&lt;a&gt;</code> e sarà possibile utilizzare le proprietà relative ai collegamenti.</p>
</td>
  </tr>
  <tr>
    <td>download</td>
    <td>download</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Destinazione del download del collegamento.</p>
<p><strong>Nota</strong>: questa proprietà è valida solo se è impostato l&#39;attributo <code>href</code>.</p>
</td>
  </tr>
  <tr>
    <td>target</td>
    <td>target</td>
    <td>true</td>
    <td>&#39;_blank&#39; | &#39;_parent&#39; | &#39;_self&#39; | &#39;_top&#39;</td>
    <td></td>
    <td><p>Modalità di apertura del collegamento. Le opzioni disponibili sono:</p>
<ul>
<li><code>_blank</code>: apre il collegamento in una nuova finestra</li>
<li><code>_parent</code>: apre il collegamento nel frame genitore</li>
<li><code>_self</code>: predefinita. Apre il collegamento nel frame corrente</li>
<li><code>_top</code>: apre il collegamento nell&#39;intera finestra</li>
</ul>
<p><strong>Nota</strong>: questa proprietà è valida solo se è impostato l&#39;attributo <code>href</code>.</p>
</td>
  </tr>
  <tr>
    <td>rel</td>
    <td>rel</td>
    <td>true</td>
    <td>&#39;alternate&#39; | &#39;author&#39; | &#39;bookmark&#39; | &#39;external&#39; | &#39;help&#39; | &#39;license&#39; | &#39;me&#39; | &#39;next&#39; | &#39;nofollow&#39; | &#39;noreferrer&#39; | &#39;opener&#39; | &#39;prev&#39; | &#39;search&#39; | &#39;tag&#39;</td>
    <td></td>
    <td><p>Relazione tra il documento corrente e il documento collegato. Le opzioni disponibili sono:</p>
<ul>
<li><code>alternate</code>: versione alternativa del documento corrente</li>
<li><code>author</code>: autore del documento o dell&#39;articolo corrente</li>
<li><code>bookmark</code>: collegamento permanente al capitolo antenato più vicino</li>
<li><code>external</code>: il documento di destinazione non appartiene allo stesso sito del documento corrente</li>
<li><code>help</code>: collegamento alla guida di riferimento</li>
<li><code>license</code>: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione</li>
<li><code>me</code>: il documento corrente rappresenta il proprietario del contenuto collegato</li>
<li><code>next</code>: il documento corrente fa parte di una serie e il documento di destinazione è il successivo</li>
<li><code>nofollow</code>: l&#39;autore o l&#39;editore del documento corrente non avalla il documento di destinazione</li>
<li><code>noreferrer</code>: non include l&#39;intestazione <code>Referer</code>. Simile a <code>noopener</code></li>
<li><code>opener</code>: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell&#39;attributo <code>target</code> è <code>_blank</code>), crea un contesto di navigazione ausiliario</li>
<li><code>prev</code>: il documento corrente fa parte di una serie e il documento di destinazione è il precedente</li>
<li><code>search</code>: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate</li>
<li><code>tag</code>: associa un tag al documento corrente (identificato dall&#39;indirizzo specificato)</li>
</ul>
<p><strong>Nota</strong>: disponibile solo quando è specificato l&#39;attributo <code>href</code>.</p>
</td>
  </tr>
  <tr>
    <td>autofocus</td>
    <td>autofocus</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Se attivare automaticamente il focus al caricamento della pagina</p>
</td>
  </tr>
  <tr>
    <td>tabindex</td>
    <td>tabIndex</td>
    <td>false</td>
    <td>number</td>
    <td></td>
    <td><p>Indice di tabulazione dell&#39;elemento</p>
</td>
  </tr>
  <tr>
    <td>disabled</td>
    <td>disabled</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Se il componente è disabilitato</p>
</td>
  </tr>
  <tr>
    <td>loading</td>
    <td>loading</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Se il componente è in stato di caricamento</p>
</td>
  </tr>
  <tr>
    <td>name</td>
    <td>name</td>
    <td>true</td>
    <td>string</td>
    <td>''</td>
    <td><p>Nome del pulsante, verrà inviato insieme ai dati del modulo.</p>
<p><strong>Nota</strong>: questa proprietà è valida solo se l&#39;attributo <code>href</code> non è impostato.</p>
</td>
  </tr>
  <tr>
    <td>value</td>
    <td>value</td>
    <td>true</td>
    <td>string</td>
    <td>''</td>
    <td><p>Valore iniziale del pulsante, verrà inviato insieme ai dati del modulo.</p>
<p><strong>Nota</strong>: questa proprietà è valida solo se l&#39;attributo <code>href</code> non è impostato.</p>
</td>
  </tr>
  <tr>
    <td>type</td>
    <td>type</td>
    <td>true</td>
    <td>&#39;submit&#39; | &#39;reset&#39; | &#39;button&#39;</td>
    <td>'button'</td>
    <td><p>Tipo di pulsante. Il tipo predefinito è <code>button</code>. Le opzioni disponibili sono:</p>
<ul>
<li><code>submit</code>: invia i dati del modulo al server</li>
<li><code>reset</code>: reimposta tutti i campi del modulo ai valori iniziali</li>
<li><code>button</code>: questo tipo di pulsante non ha un comportamento predefinito</li>
</ul>
<p><strong>Nota</strong>: questa proprietà è valida solo se l&#39;attributo <code>href</code> non è specificato.</p>
</td>
  </tr>
  <tr>
    <td>form</td>
    <td>form</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Elemento <code>&lt;form&gt;</code> associato. Il valore di questo attributo deve essere l&#39;<code>id</code> di un elemento <code>&lt;form&gt;</code> nella stessa pagina.</p>
<p>Se questo attributo non è specificato, l&#39;elemento deve essere un elemento figlio dell&#39;elemento <code>&lt;form&gt;</code>. Con questo attributo, puoi posizionare l&#39;elemento in qualsiasi punto della pagina, non solo come figlio dell&#39;elemento <code>&lt;form&gt;</code>.</p>
<p><strong>Nota</strong>: questa proprietà è valida solo se l&#39;attributo <code>href</code> non è specificato.</p>
</td>
  </tr>
  <tr>
    <td>formaction</td>
    <td>formAction</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Specifica l&#39;URL per l&#39;invio del modulo.</p>
<p>Se questo attributo è specificato, sovrascriverà l&#39;attributo <code>action</code> dell&#39;elemento <code>&lt;form&gt;</code>.</p>
<p><strong>Nota</strong>: questa proprietà è valida solo se l&#39;attributo <code>href</code> non è specificato e <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>formenctype</td>
    <td>formEnctype</td>
    <td>true</td>
    <td>&#39;application/x-www-form-urlencoded&#39; | &#39;multipart/form-data&#39; | &#39;text/plain&#39;</td>
    <td></td>
    <td><p>Specifica il tipo di contenuto per l&#39;invio del modulo al server. Le opzioni disponibili sono:</p>
<ul>
<li><code>application/x-www-form-urlencoded</code>: valore predefinito quando questo attributo non è specificato</li>
<li><code>multipart/form-data</code>: utilizzato quando il modulo contiene un elemento <code>&lt;input type=&quot;file&quot;&gt;</code></li>
<li><code>text/plain</code>: introdotto in HTML5, utilizzato per il debug</li>
</ul>
<p>Se questo attributo è specificato, sovrascriverà l&#39;attributo <code>enctype</code> dell&#39;elemento <code>&lt;form&gt;</code>.</p>
<p><strong>Nota</strong>: questa proprietà è valida solo se l&#39;attributo <code>href</code> non è specificato e <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>formmethod</td>
    <td>formMethod</td>
    <td>true</td>
    <td>&#39;post&#39; | &#39;get&#39;</td>
    <td></td>
    <td><p>Specifica il metodo HTTP da utilizzare durante l&#39;invio del modulo. Le opzioni disponibili sono:</p>
<ul>
<li><code>post</code>: i dati del modulo sono inclusi nel corpo della richiesta e inviati al server</li>
<li><code>get</code>: i dati del modulo vengono aggiunti all&#39;URL del modulo con <code>?</code> come separatore e l&#39;URL generato viene inviato al server. Utilizzare questo metodo quando il modulo non ha effetti collaterali e contiene solo caratteri ASCII</li>
</ul>
<p>Se questo attributo è impostato, sovrascriverà l&#39;attributo <code>method</code> dell&#39;elemento <code>&lt;form&gt;</code>.</p>
<p><strong>Nota</strong>: questa proprietà è valida solo se l&#39;attributo <code>href</code> non è impostato e <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>formnovalidate</td>
    <td>formNoValidate</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Se questo attributo è impostato, la convalida del modulo non verrà eseguita durante l&#39;invio.</p>
<p>Se questo attributo è impostato, sovrascriverà l&#39;attributo <code>novalidate</code> dell&#39;elemento <code>&lt;form&gt;</code>.</p>
<p><strong>Nota</strong>: questa proprietà è valida solo se l&#39;attributo <code>href</code> non è impostato e <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>formtarget</td>
    <td>formTarget</td>
    <td>true</td>
    <td>&#39;_self&#39; | &#39;_blank&#39; | &#39;_parent&#39; | &#39;_top&#39;</td>
    <td></td>
    <td><p>Dove aprire la risposta ricevuta dopo l&#39;invio del modulo. I valori opzionali includono:</p>
<ul>
<li><code>_self</code>: opzione predefinita, apre nel frame corrente</li>
<li><code>_blank</code>: apre in una nuova finestra</li>
<li><code>_parent</code>: apre nel frame genitore</li>
<li><code>_top</code>: apre nell&#39;intera finestra</li>
</ul>
<p>Se questo attributo è impostato, sovrascriverà l&#39;attributo <code>target</code> dell&#39;elemento <code>&lt;form&gt;</code>.</p>
<p><strong>Nota</strong>: questa proprietà è valida solo se l&#39;attributo <code>href</code> non è impostato e <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>validity</td>
    <td>false</td>
    <td>ValidityState</td>
    <td></td>
    <td><p>Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState" target="_blank" rel="noopener nofollow"><code>ValidityState</code></a></p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>validationMessage</td>
    <td>false</td>
    <td>string</td>
    <td></td>
    <td><p>Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota</p>
</td>
  </tr>
</tbody>
</table>

### Metodi

<table>
<thead>
  <tr>
    <th>Nome</th>
    <th>Descrizione</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>click(): void</td>
    <td><p>Simula un clic del mouse sull&#39;elemento</p>
</td>
  </tr>
  <tr>
    <td>focus(options?: FocusOptions): void</td>
    <td><p>Imposta il focus sull&#39;elemento corrente.</p>
<p>È possibile passare un oggetto come parametro, le cui proprietà includono:</p>
<ul>
<li><code>preventScroll</code>: per impostazione predefinita, dopo che l&#39;elemento riceve il focus, la pagina scorrerà per portare l&#39;elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su <code>true</code>.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>blur(): void</td>
    <td><p>Rimuove il focus dall&#39;elemento corrente</p>
</td>
  </tr>
  <tr>
    <td>checkValidity(): boolean</td>
    <td><p>Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce <code>false</code> e attiva l&#39;evento <code>invalid</code>; in caso affermativo, restituisce <code>true</code></p>
</td>
  </tr>
  <tr>
    <td>reportValidity(): boolean</td>
    <td><p>Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce <code>false</code> e attiva l&#39;evento <code>invalid</code>; in caso affermativo, restituisce <code>true</code>.</p>
<p>Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.</p>
</td>
  </tr>
  <tr>
    <td>setCustomValidity(message: string): void</td>
    <td><p>Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida</p>
</td>
  </tr>
</tbody>
</table>

### Eventi

<table>
<thead>
  <tr>
    <th>Nome</th>
    <th>Descrizione</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>focus</td>
    <td><p>Attivato quando si riceve il focus</p>
</td>
  </tr>
  <tr>
    <td>blur</td>
    <td><p>Attivato quando si perde il focus</p>
</td>
  </tr>
  <tr>
    <td>invalid</td>
    <td><p>Attivato quando la convalida del campo del modulo non viene superata</p>
</td>
  </tr>
</tbody>
</table>

### Slots

<table>
<thead>
  <tr>
    <th>Nome</th>
    <th>Descrizione</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>(predefinito)</td>
    <td><p>Testo del pulsante</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td><p>Elemento a sinistra del pulsante</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td><p>Elemento a destra del pulsante</p>
</td>
  </tr>
</tbody>
</table>

### CSS Parts

<table>
<thead>
  <tr>
    <th>Nome</th>
    <th>Descrizione</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>button</td>
    <td><p>Elemento <code>&lt;button&gt;</code> o <code>&lt;a&gt;</code> interno</p>
</td>
  </tr>
  <tr>
    <td>label</td>
    <td><p>Testo del pulsante</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td><p>Icona a sinistra del pulsante</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td><p>Icona a destra del pulsante</p>
</td>
  </tr>
  <tr>
    <td>loading</td>
    <td><p>Elemento <code>&lt;mdui-circular-progress&gt;</code> nello stato di caricamento</p>
</td>
  </tr>
</tbody>
</table>

### CSS Custom Property

<table>
<thead>
  <tr>
    <th>Nome</th>
    <th>Descrizione</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>--shape-corner</td>
    <td><p>Dimensione dell&#39;arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al <a href="/it/docs/2/styles/design-tokens#shape-corner">Design Token</a>.</p>
</td>
  </tr>
</tbody>
</table>