Button

I pulsanti sono componenti fondamentali che consentono all'utente di attivare un'azione definita. Esistono cinque tipi di pulsanti. La tabella seguente descrive l'aspetto di ciascuno dei cinque tipi di pulsanti, nonché dove utilizzarli.

Digitazione	Aspetto	Finalità
Pieno	Sfondo in tinta unita con testo in contrasto.	Pulsanti con enfasi elevata. Sono destinati alle azioni principali di un'applicazione, ad esempio "Invia" e "Salva". L'effetto ombra sottolinea l'importanza del pulsante.
Tonale con riempimento	Il colore dello sfondo varia in base alla superficie.	Anche per azioni principali o significative. I pulsanti riempiti hanno un impatto visivo maggiore e sono adatti a funzioni come "Aggiungi al carrello" e "Accedi".
Elevata	Si distingue per l'ombra.	Svolge un ruolo simile ai pulsanti tonali. Aumenta l'elevazione per rendere il pulsante ancora più visibile.
Contorno	Presenta un bordo senza riempimento.	Pulsanti con enfasi media, contenenti azioni importanti ma non principali. Si accoppiano bene con altri pulsanti per indicare azioni secondarie alternative come "Annulla" o "Indietro".
Testo	Mostra il testo senza sfondo o bordo.	Pulsanti con enfasi ridotta, ideali per azioni meno critiche come i link di navigazione o funzioni secondarie come "Scopri di più" o "Visualizza dettagli".

L'immagine seguente mostra i cinque tipi di pulsanti in Material Design.

Figura 1. I cinque componenti pulsante.

Piattaforma API

• onClick: la funzione chiamata quando l'utente preme il pulsante.
• enabled: se impostato su false, questo parametro fa sì che il pulsante venga visualizzato come non disponibile e non attivo.
• colors: un'istanza di ButtonColors che determina i colori utilizzati nel pulsante.
• contentPadding: lo spazio interno del pulsante.

Pulsante con riempimento

Il componente pulsante con riempimento utilizza il composable di base Button. Per impostazione predefinita, è preenchito con un colore a tinta unita. Lo snippet seguente mostra come implementare il componente:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Nota: se vuoi creare un pulsante personalizzato, utilizza il composable Button.

Questa implementazione si presenta nel seguente modo:

Figura 2. Un pulsante con riempimento.

Pulsante tonale pieno

Il componente pulsante tonale con riempimento utilizza il composable FilledTonalButton. Viene riempita con un colore tonale per impostazione predefinita.

Il seguente snippet mostra come implementare il componente:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Questa implementazione si presenta nel seguente modo:

Figura 3. Un pulsante con tonalità.

Pulsante con contorni

Il componente pulsante con bordi utilizza il composable OutlinedButton. Per impostazione predefinita, viene visualizzato con un contorno.

Il seguente snippet illustra come implementare il componente:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Questa implementazione si presenta nel seguente modo:

Figura 4. Un pulsante con contorni.

Pulsante in rilievo

Il componente pulsante in rilievo utilizza il composable ElevatedButton. Per impostazione predefinita, ha un'ombra che rappresenta l'effetto di elevazione. Tieni presente che si tratta essenzialmente di un pulsante con bordi e ombra.

Il seguente snippet mostra come implementare il componente:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

Questa implementazione è visualizzata come segue:

Figura 5. Un pulsante con privilegi elevati.

Pulsante di testo

Il componente pulsante di testo utilizza il composable TextButton. Fino a quando non viene premuto, viene visualizzato solo come testo. Per impostazione predefinita, non ha un riempimento o un contorno solido.

Il seguente snippet mostra come implementare il componente:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Questa implementazione è visualizzata come segue:

Figura 6. Un pulsante di testo.

Risorse aggiuntive

• Pulsante di azione mobile
• Documentazione di Material UI