Button

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 e le relative posizioni di utilizzo.

Digitazione

Aspetto

Finalità

Riempito

Sfondo a tinta unita con testo a contrasto.

Pulsanti ad alta enfasi. Si tratta delle 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 pieni offrono maggiore peso visivo e si adattano 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 mettere il pulsante in evidenza.

Contorno

Presenta un bordo senza riempimento.

Pulsanti di media enfasi, contenenti azioni importanti, ma non principali. Si abbinano bene ad altri pulsanti per indicare azioni secondarie alternative, come "Annulla" o "Indietro".

Testo

Visualizza 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.

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

API surface

  • 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 pieno

Il componente pulsante con riempimento utilizza il composable di base Button. È riempita con un colore a tinta unita per impostazione predefinita. Lo snippet seguente mostra come implementare il componente:

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

Questa implementazione è visualizzata come segue:

Un pulsante con riempimento e sfondo viola con la dicitura "filled".
Figura 2. Un pulsante pieno.

Pulsante tonale con riempimento

Il componente pulsante tonale con riempimento utilizza il composable 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 è visualizzata come segue:

Un pulsante tonale con sfondo viola chiaro con la dicitura "Completato".
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 mostra come implementare il componente:

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

Questa implementazione è visualizzata come segue:

Un pulsante con contorni trasparenti e un bordo scuro con la dicitura "Con contorni".
Figura 4. Un pulsante con contorni.

Pulsante in rilievo

Il componente del pulsante con valori elevati utilizza il componibile ElevatedButton. Per impostazione predefinita, ha un'ombra che rappresenta l'effetto di elevazione. Tieni presente che si tratta essenzialmente di un pulsante con contorno con un'ombra.

Il seguente snippet illustra come implementare il componente:

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

Questa implementazione è visualizzata come segue:

Un pulsante in alto con uno sfondo grigio con la scritta "Elevata".
Figura 5. Un pulsante rialzato.

Pulsante di testo

Il componente del pulsante di testo utilizza il componibile 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:

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

Risorse aggiuntive