Il colore dello sfondo varia in base alla superficie.
Per azioni principali o significative. I pulsanti riempiti hanno un'impronta visiva e sono appropriati per azioni come "Aggiungi al carrello" e "Accedi".
Per azioni importanti, ma non principali. I pulsanti con contorni si abbinano bene ad altri pulsanti per indicare azioni secondarie alternative, come "Annulla" o "Indietro".
Per azioni meno critiche come i link di navigazione o azioni secondarie come "Scopri di più" o "Visualizza dettagli".
Compatibilità delle versioni
Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.
Dipendenze
Creare un pulsante con riempimento
Il componente pulsante con riempimento utilizza il composable di base Button. Per impostazione predefinita, è preenchito con un colore a tinta unita.
Risultati
Figura 1. Un pulsante con riempimento.
Creare un pulsante con tonalità a riempimento
Il componente pulsante tonale con riempimento utilizza il composable FilledTonalButton.
Per impostazione predefinita, è riempito con un colore tonale.
Risultati
Figura 2. Un pulsante con tonalità.
Creare un pulsante con contorni
Il componente pulsante con bordi utilizza il composable OutlinedButton. Per impostazione predefinita viene visualizzato con un contorno.
Risultati
Figura 3. Un pulsante con contorni.
Creare un pulsante in rilievo
Il componente pulsante in rilievo utilizza il composable ElevatedButton. Ha un'ombra che rappresenta l'effetto di elevazione per impostazione predefinita e viene visualizzato come un pulsante con contorni e un'ombra.
Risultati
Figura 4. Un pulsante rialzato.
Creare un pulsante di testo
Il componente pulsante di testo utilizza il composable TextButton. Fino a quando non viene fatto clic, viene visualizzato solo come testo. Per impostazione predefinita, non ha un riempimento o un contorno solido.
Risultati
Figura 5. Un pulsante di testo.
Punti chiave
onClick: la funzione chiamata quando l'utente preme il pulsante.
enabled: se è false, questo parametro fa sì che il pulsante non sia visibile e non sia attivo.
colors: un'istanza di ButtonColors che determina i colori utilizzati nel pulsante.
contentPadding: la spaziatura interna del pulsante.
Raccolte che contengono questa guida
Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:
Mostrare componenti interattivi
Scopri come le funzioni composable possono aiutarti a creare facilmente magnifici componenti dell'interfaccia utente basati sul sistema di progettazione Material Design.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-02-06 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-02-06 UTC."],[],[],null,["\u003cbr /\u003e\n\nButtons let the user trigger a defined action. There are five types of\nbutton:\n\n| Type | Appearance | Purpose |\n|-------------------------------|-----------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| [Filled](#create-filled) | Solid background with contrasting text. | For primary actions, such as \"Submit\" and \"Save.\" The shadow effect emphasizes the button's importance. |\n| [Tonal](#create-filled-tonal) | Background color varies to match the surface. | For primary or significant actions. Filled buttons provide visual weight and are appropriate for actions like \"Add to cart\" and \"Sign in.\" |\n| [Elevated](#create-elevated) | Shadow makes it stand out. | For primary or significant actions. Increase elevation to make the button more prominent. |\n| [Outlined](#create-outlined) | Features a border with no fill. | For actions that are important but not primary. Outlined buttons pair well with other buttons to indicate alternative, secondary actions like \"Cancel\" or \"Back.\" |\n| [Text](#create-text) | Text with no background or border. | For less critical actions such as navigational links, or secondary actions like \"Learn more\" or \"View details.\" |\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nCreate a filled button\n\nThe filled button component uses the basic [`Button`](/reference/kotlin/androidx/compose/material3/package-summary?#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ButtonColors,androidx.compose.material3.ButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) composable. It is\nfilled with a solid color by default.\n\nResults **Figure 1.** A filled button.\n\nCreate a filled tonal button\n\nThe filled tonal button component uses the [`FilledTonalButton`](/reference/kotlin/androidx/compose/material3/package-summary#FilledTonalButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ButtonColors,androidx.compose.material3.ButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) composable.\nIt is filled with a tonal color by default.\n\nResults **Figure 2.** A tonal button.\n\nCreate an outlined button\n\nThe outlined button component uses the [`OutlinedButton`](/reference/kotlin/androidx/compose/material3/package-summary#OutlinedButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ButtonColors,androidx.compose.material3.ButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) composable. It\nappears with an outline by default.\n\nResults **Figure 3.** An outlined button.\n\nCreate an elevated button\n\nThe elevated button component uses the [`ElevatedButton`](/reference/kotlin/androidx/compose/material3/package-summary#ElevatedButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ButtonColors,androidx.compose.material3.ButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) composable. It has\na shadow that represents the elevation effect by default and appears as\nan outlined button with a shadow.\n\nResults **Figure 4.** An elevated button.\n\nCreate a text button\n\nThe text button component uses the [`TextButton`](/reference/kotlin/androidx/compose/material3/package-summary#TextButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ButtonColors,androidx.compose.material3.ButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) composable. Until clicked,\nit appears only as text. It does not have a solid fill or outline by default.\n\nResults **Figure 5.** A text button.\n\nKey points\n\n- `onClick`: The function called when the user presses the button.\n- `enabled`: When false, this parameter causes the button to appear unavailable and inactive.\n- `colors`: An instance of `ButtonColors` that determines the colors used in the button.\n- `contentPadding`: The padding within the button.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
