Pulsante

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

Tipo

Aspetto

Finalità

Pieno

Sfondo a tinta unita con testo in contrasto.

Pulsanti con enfasi elevata. Si tratta delle azioni principali in una richiesta, ad esempio "invia" e "salva". L'effetto ombre evidenzia l'importanza del pulsante.

Tonale pieno

Il colore di sfondo varia in base alla superficie.

Anche per le azioni principali o significative. I pulsanti pieni offrono ulteriori funzioni visive per il peso e l'ade, come "aggiungi al carrello" e "Accedi".

Alta

Si distingue per un'ombra.

Offre un ruolo simile ai pulsanti tonali. Aumenta l'elevazione per aumentare la visibilità del pulsante.

Con contorno

Presenta un bordo senza riempimento.

Pulsanti di enfasi media che contengono azioni importanti ma non principali. Si associano bene ad altri pulsanti per indicare azioni secondarie alternative 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".

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

Un esempio di ognuno dei cinque componenti del pulsante, con le caratteristiche uniche evidenziate.
Figura 1. I cinque componenti del pulsante.

Piattaforma API

  • onClick: la funzione chiamata quando l'utente preme il pulsante.
  • enabled: se il valore è false, questo parametro indica che il pulsante non è disponibile e non è attivo.
  • colors: un'istanza di ButtonColors che determina i colori utilizzati nel pulsante.
  • contentPadding: la spaziatura interna all'interno del pulsante.

Pulsante Riempito

Il componente Pulsante compilato utilizza l'elemento componibile di base Button. Per impostazione predefinita è riempito 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

Questa implementazione si presenta come segue:

Un pulsante pieno con uno sfondo viola con la dicitura "riempito".
Figura 2. Un pulsante riempito.

Pulsante tonale pieno

Il componente Pulsante tonale pieno utilizza il componibile FilledTonalButton. Per impostazione predefinita, è riempito con un colore tonale.

Il seguente snippet mostra come implementare il componente:

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

Questa implementazione si presenta come segue:

Un pulsante tonale con uno sfondo viola chiaro con la scritta "pieno".
Figura 3. Un pulsante tonale.

Pulsante con contorno

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

Il seguente snippet mostra come implementare il componente:

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

Questa implementazione si presenta come segue:

Un pulsante con contorno trasparente con un bordo scuro che riporta la dicitura "Contorno".
Figura 4. Un pulsante con un contorno.

Pulsante in rilievo

Il componente Pulsante in alto utilizza il componibile ElevatedButton. Ha un'ombra che rappresenta l'effetto elevazione per impostazione predefinita. Tieni presente che si tratta essenzialmente di un pulsante con contorni e un'ombra.

Il seguente snippet mostra come implementare il componente:

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

Questa implementazione si presenta come segue:

Un pulsante in evidenza con uno sfondo grigio con la scritta "Elevata".
Figura 5. Un pulsante elevato.

Pulsante Testo

Il componente Pulsante di testo utilizza il componibile TextButton. Fino a quando non viene premuto, viene visualizzato solo come testo. Non ha un riempimento o un contorno continuo per impostazione predefinita.

Il seguente snippet mostra come implementare il componente:

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

Questa implementazione si presenta come segue:

Un pulsante di testo con la dicitura "Pulsante Testo"
Figura 6. Un pulsante di testo.

Risorse aggiuntive