Die Hintergrundfarbe passt sich der Oberfläche an.
Für primäre oder wichtige Aktionen. Ausgefüllte Schaltflächen wirken optisch schwerer und eignen sich für Aktionen wie „In den Einkaufswagen legen“ und „Anmelden“.
Für Aktionen, die wichtig, aber nicht primär sind. Schaltflächen mit Umriss eignen sich gut, um alternative oder sekundäre Aktionen wie „Abbrechen“ oder „Zurück“ anzuzeigen.
Für weniger wichtige Aktionen wie Navigationslinks oder sekundäre Aktionen wie „Weitere Informationen“ oder „Details ansehen“.
Versionskompatibilität
Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.
Abhängigkeiten
Gefüllte Schaltfläche erstellen
Für die Schaltfläche mit Füllung wird die grundlegende Komponente Button verwendet. Standardmäßig ist er mit einer durchgehenden Farbe gefüllt.
Ergebnisse
Abbildung 1: Eine gefüllte Schaltfläche.
Eine gefüllte Schaltfläche mit Tonwerten erstellen
Für die Schaltfläche mit farbigem Hintergrund wird das FilledTonalButton-Element verwendet.
Es ist standardmäßig mit einer Tonfarbe gefüllt.
Ergebnisse
Abbildung 2: Eine farblich hervorgehobene Schaltfläche.
Eine umrandete Schaltfläche erstellen
Für die umrandete Schaltflächenkomponente wird das OutlinedButton-Element verwendet. Sie wird standardmäßig mit einem Umriss angezeigt.
Ergebnisse
Abbildung 3: Eine Schaltfläche mit Umriss.
Erhöhte Schaltfläche erstellen
Für die Schaltfläche mit erhöhtem Sichtfeld wird das ElevatedButton-Element verwendet. Sie hat einen Schatten, der standardmäßig den Höheneffekt darstellt, und wird als umrandete Schaltfläche mit Schatten angezeigt.
Ergebnisse
Abbildung 4: Eine erhöhte Schaltfläche.
Textschaltfläche erstellen
Für die Schaltfläche mit Text wird das TextButton-Element verwendet. Bis zum Klicken wird es nur als Text angezeigt. Sie hat standardmäßig keine durchgehende Füllung oder keinen Umriss.
Ergebnisse
Abbildung 5: Eine Textschaltfläche.
Wichtige Fakten
onClick: Die Funktion, die aufgerufen wird, wenn der Nutzer auf die Schaltfläche drückt.
enabled: Wenn dieser Parameter auf „false“ gesetzt ist, wird die Schaltfläche als nicht verfügbar und inaktiv angezeigt.
colors: Eine Instanz von ButtonColors, die die Farben der Schaltfläche bestimmt.
contentPadding: Der Abstand innerhalb der Schaltfläche.
Sammlungen, die diesen Leitfaden enthalten
Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:
Interaktive Komponenten anzeigen
Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-02-06 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 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)"]]
