Button

I pulsanti sono componenti fondamentali che consentono all'utente di attivare un un'azione. Esistono cinque tipi di pulsanti. Nella tabella seguente vengono descritti i l'aspetto di ciascuno dei cinque tipi di pulsanti, oltre alla posizione in cui dovresti utilizzare che li rappresentano.

Tipo

Aspetto

Finalità

Pieno

Sfondo in tinta unita con testo in contrasto.

Pulsanti con enfasi elevata. Si tratta delle azioni principali in un'applicazione, ad esempio "invia" e "Salva". L'effetto ombra mette in risalto l'importanza del pulsante.

Tonalità riempita

Il colore dello sfondo varia in base alla superficie.

Anche per le azioni principali o significative. I pulsanti pieni offrono maggiore peso visivo e si adattano a funzioni come "aggiungi al carrello" e "Accedi".

Alta

Si distingue perché ha un'ombra.

Funziona in modo 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 accoppiano bene con altri pulsanti per indicare azioni secondarie alternative come "Annulla" o "Indietro".

Testo

Visualizza 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 del pulsante, con le loro caratteristiche uniche evidenziate.
Figura 1. I cinque pulsanti.

Piattaforma API

  • onClick: la funzione chiamata quando l'utente preme il pulsante.
  • enabled: se falso, questo parametro fa sì che il pulsante venga visualizzato non disponibili e inattivi.
  • colors: un'istanza di ButtonColors che determina i colori utilizzati in il pulsante.
  • contentPadding: la spaziatura interna all'interno del pulsante.

Pulsante pieno

Il componente pulsante riempito utilizza l'elemento componibile Button di base. È riempita con un colore a tinta unita per impostazione predefinita. Il seguente snippet illustra come implementare il componente:

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

Questa implementazione si presenta nel seguente modo:

Un pulsante pieno con uno sfondo viola che dice "riempito".
Figura 2. Un pulsante pieno.

Pulsante tonale pieno

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

Il seguente snippet illustra come implementare il componente:

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

Questa implementazione si presenta nel seguente modo:

Un pulsante tonale con uno sfondo viola chiaro che indica "pieno".
Figura 3. Un pulsante tonale.

Pulsante con contorni

Il componente pulsante delineato utilizza il componibile OutlinedButton. it appare con una struttura per impostazione predefinita.

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:

Un pulsante trasparente con contorno scuro e con la scritta "Contorno".
Figura 4. Un pulsante con i contorni.

Pulsante in rilievo

Il componente del pulsante con privilegi elevati utilizza il componibile ElevatedButton. Ha un'ombra che rappresenta l'effetto di elevazione per impostazione predefinita. Tieni presente che essenzialmente un pulsante con contorni ombra.

Il seguente snippet illustra come implementare il componente:

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

Questa implementazione si presenta nel seguente modo:

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

Pulsante Testo

Il componente del pulsante di testo utilizza il componibile TextButton. Fino a quando non premi, e appare come solo testo. Per impostazione predefinita, non presenta un riempimento o un contorno in tinta unita.

Il seguente snippet illustra come implementare il componente:

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

Questa implementazione si presenta nel seguente modo:

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

Risorse aggiuntive