Pulsante

I pulsanti sono componenti fondamentali che consentono all'utente di attivare un'azione definita. Esistono cinque tipi di pulsanti. Questa tabella descrive l'aspetto di ciascuno dei cinque tipi di pulsanti e dove utilizzarli:

Tipo Aspetto Finalità
Pieno Sfondo a tinta unita con testo a contrasto. Pulsanti con enfasi elevata. Questi sono per le azioni principali in un'applicazione, come "Invia" e "Salva". L'effetto ombra evidenzia l'importanza del pulsante.
Pieno tonale Il colore di sfondo varia in base alla piattaforma. Anche per azioni principali o significative. I pulsanti con riempimento tonale offrono un maggiore peso visivo e sono adatti a funzioni come "Aggiungi al carrello" e "Accedi".
Elevata Si distingue per la presenza di un'ombra. Hanno uno scopo simile ai pulsanti tonali. Aumenta l'elevazione per rendere il pulsante ancora più visibile.
Con contorno Presenta un bordo senza riempimento. Pulsanti con enfasi media, contenenti azioni importanti, ma non principali. Si abbinano bene ad altri pulsanti per indicare azioni alternative e secondarie come "Annulla" o "Indietro".
Testo Mostra il testo senza sfondo o bordo. Pulsanti con enfasi bassa, ideali per azioni meno critiche, come link di navigazione o funzioni secondarie come "Scopri di più" o "Visualizza dettagli".

Questa immagine mostra i cinque tipi di pulsanti in Material Design:

Un esempio di ciascuno dei cinque componenti dei pulsanti, con le relative caratteristiche uniche evidenziate.
Figura 1. I cinque componenti dei pulsanti.

Piattaforma API

onClick
La funzione che il sistema chiama quando l'utente preme il pulsante.
enabled
Se impostato su false, questo parametro fa apparire il pulsante come non disponibile e non attivo.
colors
Un'istanza di ButtonColors che determina i colori utilizzati nel pulsante.
contentPadding
Il padding all'interno del pulsante.

Pulsante con riempimento

Il componente pulsante con riempimento utilizza il componibile di base Button. Per impostazione predefinita, è riempito con un colore a tinta unita. Lo snippet mostra come implementare il componente e visualizzarne l'anteprima in modo interattivo:

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

Pulsante con riempimento tonale

Il componente del pulsante con tonalità piena utilizza il componibile FilledTonalButton. Per impostazione predefinita, è riempito con un colore tonale.

Lo snippet mostra come implementare il componente e visualizzarne l'anteprima in modo interattivo:

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

Pulsante con contorno

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

Lo snippet mostra come implementare il componente e visualizzarne l'anteprima in modo interattivo:

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

Pulsante in rilievo

Il componente del pulsante in rilievo utilizza il componibile ElevatedButton. Per impostazione predefinita, ha un'ombra che rappresenta l'effetto di elevazione. È un pulsante con riempimento che include un'ombra.

Lo snippet mostra come implementare il componente e visualizzarne l'anteprima in modo interattivo:

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

Pulsante Testo

Il componente del pulsante di testo utilizza il componibile TextButton. Viene visualizzato solo come testo finché non viene premuto. Per impostazione predefinita, non ha un riempimento o un contorno a tinta unita.

Lo snippet mostra come implementare il componente e visualizzarne l'anteprima in modo interattivo:

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

Risorse aggiuntive