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, nonché dove utilizzarli.

Tipo

Aspetto

Finalità

Compilato

Sfondo uniforme con testo a contrasto.

Pulsanti con enfasi elevata. Questi sono per le azioni principali in un'applicazione, ad esempio "Invia" e "Salva". L'effetto ombra enfatizza l'importanza del pulsante.

Tonale pieno

Il colore dello sfondo varia in base alla superficie.

Anche per azioni principali o significative. I pulsanti pieni hanno un peso visivo maggiore e sono adatti a funzioni come "Aggiungi al carrello" e "Accedi".

Elevata

Si distingue per la presenza di un'ombra.

Svolge una funzione simile a quella dei pulsanti tonali. Aumenta l'elevazione per far apparire il pulsante ancora più in evidenza.

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 secondarie alternative come "Annulla" o "Indietro".

Testo

Mostra il testo senza sfondo o bordo.

Pulsanti a bassa enfasi, ideali per azioni meno critiche come 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 pulsante, con le relative caratteristiche uniche evidenziate.
Figura 1. I cinque componenti pulsante.

Superficie 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 inattivo.
  • 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 composable di base Button. Per impostazione predefinita, è riempito con un colore a tinta unita. Il seguente snippet mostra come implementare il componente:

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

Questa implementazione viene visualizzata nel seguente modo:

Un pulsante con riempimento con sfondo viola con la scritta "con riempimento".
Figura 2. Un pulsante con riempimento.

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 viene visualizzata nel seguente modo:

Un pulsante tonale con sfondo viola chiaro con la dicitura "Pieno".
Figura 3. Un pulsante tonale.

Pulsante con contorni

Il componente pulsante contorno 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 viene visualizzata nel seguente modo:

Un pulsante trasparente con contorni e un bordo scuro con la scritta "Contorni".
Figura 4. Un pulsante con contorni.

Pulsante sollevato

Il componente Pulsante rialzato 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 un contorno e un'ombreggiatura.

Il seguente snippet mostra come implementare il componente:

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

Questa implementazione viene visualizzata nel seguente modo:

Un pulsante sollevato con sfondo grigio con la scritta "Sollevato".
Figura 5. Un pulsante sollevato.

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

Il seguente snippet mostra come implementare il componente:

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

Questa implementazione viene visualizzata nel seguente modo:

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

Risorse aggiuntive