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

Tipo Aspetto Finalità
Pieno Sfondo pieno con testo a contrasto. Pulsanti ad alta enfasi. Sono destinati alle azioni principali di un' applicazione, come "Invia" e "Salva". L'effetto ombra evidenzia l'importanza del pulsante.
Pieno tonale Il colore di sfondo varia in base alla superficie. Anche per azioni principali o significative. I pulsanti pieni tonali forniscono un peso visivo maggiore e sono adatti a funzioni come "Aggiungi al carrello" e "Accedi".
Elevata Si distingue per l'ombra. Ha uno scopo simile ai pulsanti tonali. Aumenta l'elevazione per rendere il pulsante ancora più visibile.
Con contorno Presenta un bordo senza riempimento. Pulsanti a media enfasi, contenenti azioni importanti ma non principali. Si abbinano bene ad altri pulsanti per indicare azioni alternative, secondarie 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".

Questa immagine 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 dei pulsanti.

Piattaforma API

onClick
La funzione che il sistema chiama quando l'utente preme il pulsante.
enabled
Quando false, questo parametro fa in modo che il pulsante appaia 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 del pulsante con riempimento utilizza il componibile Button di base. Per impostazione predefinita, viene riempito con un colore pieno. Lo snippet mostra come implementare il componente:

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

Questa implementazione viene visualizzata come segue:

Un pulsante con riempimento con sfondo viola con la dicitura "Con riempimento".
Figura 2. Un pulsante con riempimento.

Pulsante pieno tonale

Il componente del pulsante pieno tonale utilizza il FilledTonalButton componibile. Per impostazione predefinita, viene riempito con un colore tonale.

Lo snippet mostra come implementare il componente:

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

Questa implementazione viene visualizzata come segue:

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

Pulsante con contorni

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

Lo snippet mostra come implementare il componente:

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

Questa implementazione viene visualizzata come segue:

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

Pulsante sollevato

Il componente del pulsante sollevato utilizza il ElevatedButton componibile. 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:

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

Questa implementazione viene visualizzata come segue:

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

Pulsante Testo

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

Lo snippet mostra come implementare il componente:

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

Questa implementazione viene visualizzata come segue:

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

Risorse aggiuntive