A cor de fundo varia para combinar com a superfície.
Para ações principais ou significativas. Os botões preenchidos fornecem peso visual e são adequados para ações como "Adicionar ao carrinho" e "Fazer login".
Para ações importantes, mas não principais. Os botões com contorno combinam bem com outros para indicar ações secundárias e alternativas, como "Cancelar" ou "Voltar".
Para ações menos importantes, como links de navegação ou ações secundárias, como "Saiba mais" ou "Ver detalhes".
Compatibilidade de versões
Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou
mais recente.
Dependências
Criar um botão preenchido
O componente de botão preenchido usa o elemento combinável básico Button. Ele é
preenchido com uma cor sólida por padrão.
Resultados
Figura 1. Um botão preenchido.
Criar um botão tonal preenchido
O componente do botão tonal preenchido usa o elemento combinável FilledTonalButton.
Por padrão, ele é preenchido com uma cor tonal.
Resultados
Figura 2. Um botão tonal.
Criar um botão de contorno
O componente de botão de contorno usa o elemento combinável OutlinedButton. Ele
aparece com um contorno por padrão.
Resultados
Figura 3. Um botão contornado.
Criar um botão elevado
O componente de botão elevado usa o elemento combinável ElevatedButton. Ele tem
uma sombra que representa o efeito de elevação por padrão e aparece como
um botão delineado com uma sombra.
Resultados
Figura 4. Um botão elevado.
Criar um botão de texto
O componente do botão de texto usa o elemento combinável TextButton. Até ser clicado,
ele aparece apenas como texto. Ele não tem um preenchimento sólido ou contorno por padrão.
Resultados
Figura 5. Um botão de texto.
Pontos principais
onClick: a função chamada quando o usuário pressiona o botão.
enabled: quando falso, esse parâmetro faz com que o botão apareça
indisponível e inativo.
colors: uma instância de ButtonColors que determina as cores usadas no
botão.
contentPadding: o padding dentro do botão.
Coleções que contêm este guia
Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem
metas mais amplas de desenvolvimento para Android:
Mostrar componentes interativos
Aprenda como as funções combináveis podem permitir que você crie
componentes de interface bonitos com base no sistema de design
do Material Design.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-02-06 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-02-06 UTC."],[],[],null,["# Create a button\n\n\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---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a filled button\n----------------------\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\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun FilledButtonExample(onClick: () -\u003e Unit) {\n Button(onClick = { onClick() }) {\n Text(\"Filled\")\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L58-L63\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 1.** A filled button.\n\nCreate a filled tonal button\n----------------------------\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\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun FilledTonalButtonExample(onClick: () -\u003e Unit) {\n FilledTonalButton(onClick = { onClick() }) {\n Text(\"Tonal\")\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L67-L72\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 2.** A tonal button.\n\nCreate an outlined button\n-------------------------\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\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun OutlinedButtonExample(onClick: () -\u003e Unit) {\n OutlinedButton(onClick = { onClick() }) {\n Text(\"Outlined\")\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L85-L90\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 3.** An outlined button.\n\nCreate an elevated button\n-------------------------\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\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun ElevatedButtonExample(onClick: () -\u003e Unit) {\n ElevatedButton(onClick = { onClick() }) {\n Text(\"Elevated\")\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L76-L81\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 4.** An elevated button.\n\nCreate a text button\n--------------------\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\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun TextButtonExample(onClick: () -\u003e Unit) {\n TextButton(\n onClick = { onClick() }\n ) {\n Text(\"Text Button\")\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L94-L101\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 5.** A text button.\n\nKey points\n----------\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-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display interactive components\n\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\n--------------------------\n\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)"]]
