El color de fondo varía para que coincida con la superficie.
Para acciones principales o significativas. Los botones rellenos proporcionan peso visual y son adecuados para acciones como "Agregar al carrito" y "Acceder".
Para acciones que son importantes, pero no principales. Los botones con contorno se combinan bien con otros botones para indicar acciones secundarias alternativas, como "Cancelar" o "Atrás".
Para acciones menos importantes, como vínculos de navegación o acciones secundarias, como "Más información" o "Ver detalles".
Compatibilidad de versiones
Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.
Dependencias
Crea un botón relleno
El componente de botón relleno usa el elemento componible básico Button. De forma predeterminada, se completa con un color sólido.
Resultados
Figura 1: Un botón relleno.
Crea un botón tonal relleno
El componente de botón tonal relleno usa el elemento componible FilledTonalButton.
De forma predeterminada, se completa con un color tonal.
Resultados
Figura 2: Un botón tonal.
Crea un botón con un contorno
El componente de botón con contorno usa el elemento componible OutlinedButton. Aparece con un esquema de forma predeterminada.
Resultados
Figura 3: Un botón con contorno.
Cómo crear un botón elevado
El componente de botón elevado usa el elemento componible ElevatedButton. Tiene una sombra que representa el efecto de elevación de forma predeterminada y aparece como un botón con un contorno y una sombra.
Resultados
Figura 4: Un botón elevado.
Crea un botón de texto
El componente de botón de texto usa el elemento componible TextButton. Hasta que se hace clic en él,
solo aparece como texto. No tiene un relleno ni un contorno sólidos de forma predeterminada.
Resultados
Figura 5: Un botón de texto.
Puntos clave
onClick: Es la función a la que se llama cuando el usuario presiona el botón.
enabled: Cuando es falso, este parámetro hace que el botón aparezca como no disponible e inactivo.
colors: Es una instancia de ButtonColors que determina los colores que se usan en el botón.
contentPadding: Es el padding dentro del botón.
Colecciones que contienen esta guía
Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:
Cómo mostrar componentes interactivos
Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-02-06 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 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)"]]
