Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
keywords: AiAssisted, product:JetpackCompose
Düğmeler, kullanıcının tanımlanmış bir işlemi tetiklemesine olanak tanıyan temel bileşenlerdir. Beş tür düğme vardır. Bu tabloda, beş düğme türünün her birinin görünümü ve bunları nerede kullanmanız gerektiği açıklanmaktadır:
Tür
Görünüm
Amaç
Doldurulmuş
Kontrastlı metin içeren düz arka plan.
Yüksek vurgulu düğmeler. Bunlar, bir uygulamadaki "gönder" ve "kaydet" gibi birincil işlemler içindir. Gölge efekti, düğmenin önemini vurgular.
Dolu tonal
Arka plan rengi, yüzeyle eşleşecek şekilde değişir.
Birincil veya önemli işlemler için de geçerlidir. Dolu tonlu düğmeler daha fazla görsel ağırlık sağlar ve "alışveriş sepetine ekle" ile "oturum aç" gibi işlevlere uygundur.
Normalden yüksek
Gölgesi sayesinde öne çıkar.
Ton düğmelerine benzer bir amaca hizmet eder. Düğmenin daha da belirgin görünmesi için yüksekliği artırın.
Dış çizgili
İçi boş bir kenarlığa sahiptir.
Önemli ancak birincil olmayan işlemleri içeren orta vurgulu düğmeler. "İptal" veya "Geri" gibi alternatif, ikincil işlemleri belirtmek için diğer düğmelerle iyi eşleşirler.
Metin
Arka planı veya kenarlığı olmayan metinleri gösterir.
Gezinme bağlantıları veya "Daha fazla bilgi" ya da "Ayrıntıları görüntüle" gibi ikincil işlevler gibi daha az kritik işlemler için ideal olan düşük vurgulu düğmeler.
Bu resimde, Material Design'daki beş düğme türü gösterilmektedir:
Şekil 1. Beş düğme bileşeni.
API yüzeyi
onClick
Kullanıcı düğmeye bastığında sistemin çağırdığı işlev.
enabled
Bu parametre false olduğunda düğme kullanılamaz ve devre dışı görünür.
colors
Düğmede kullanılan renkleri belirleyen bir ButtonColors örneği.
contentPadding
Düğme içindeki dolgu.
Doldurulmuş düğme
Dolu düğme bileşeni, temel Button composable'ını kullanır. Varsayılan olarak düz renkle doldurulur. Snippet'te bileşenin nasıl uygulanacağı gösterilmektedir:
Yükseltilmiş düğme bileşeni, ElevatedButton composable'ını kullanır. Varsayılan olarak, yüksekliği temsil eden bir gölgeye sahiptir. Gölge içeren dolu bir düğmedir.
Snippet'te bileşenin nasıl uygulanacağı gösterilmektedir:
Metin düğmesi bileşeni, TextButton composable'ını kullanır. Basılana kadar yalnızca metin olarak görünür. Varsayılan olarak düz dolgusu veya ana hattı yoktur.
Snippet'te bileşenin nasıl uygulanacağı gösterilmektedir:
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-08-27 UTC.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2025-08-27 UTC."],[],[],null,["keywords: AiAssisted, product:JetpackCompose\n\nButtons are fundamental components that allow the user to trigger a defined\naction. There are five types of buttons. This table describes the\nappearance of each of the five button types, as well as where you should use\nthem:\n\n| Type | Appearance | Purpose |\n|--------------|-----------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| Filled | Solid background with contrasting text. | High-emphasis buttons. These are for primary actions in an application, such as \"submit\" and \"save.\" The shadow effect highlights the button's importance. |\n| Filled tonal | Background color varies to match the surface. | Also for primary or significant actions. Filled tonal buttons provide more visual weight and suit functions such as \"add to cart\" and \"Sign in.\" |\n| Elevated | Stands out by having a shadow. | Serves a similar purpose to tonal buttons. Increase elevation to make the button appear even more prominently. |\n| Outlined | Features a border with no fill. | Medium-emphasis buttons, containing actions that are important but not primary. They pair well with other buttons to indicate alternative, secondary actions like \"Cancel\" or \"Back.\" |\n| Text | Displays text with no background or border. | Low-emphasis buttons, ideal for less critical actions such as navigational links, or secondary functions like \"Learn More\" or \"View details.\" |\n\nThis image demonstrates the five types of buttons in Material Design:\nFigure 1. The five button components.\n\nAPI surface\n\n`onClick`\n: The function that the system calls when the user presses the button.\n\n`enabled`\n: When `false`, this parameter makes the button appear unavailable and\n inactive.\n\n`colors`\n: An instance of `ButtonColors` that determines the colors used in the\n button.\n\n`contentPadding`\n: The padding within the button.\n\nFilled 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. The snippet shows how to implement the\ncomponent:\n\n\n```kotlin\n@Composable\nfun FilledButtonExample(onClick: () -\u003e Unit) {\n Button(onClick = { onClick() }) {\n Text(\"Filled\")\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L58-L63\n```\n\n\u003cbr /\u003e\n\n| **Note:** If you want to build a custom button, use the `Button` composable.\n\nThis implementation appears as shown:\nFigure 2. A filled button.\n\nFilled 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\nThe snippet shows how to implement the component:\n\n\n```kotlin\n@Composable\nfun FilledTonalButtonExample(onClick: () -\u003e Unit) {\n FilledTonalButton(onClick = { onClick() }) {\n Text(\"Tonal\")\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L67-L72\n```\n\n\u003cbr /\u003e\n\nThis implementation appears as shown:\nFigure 3. A tonal button.\n\nOutlined 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\nThe snippet shows how to implement the component:\n\n\n```kotlin\n@Composable\nfun OutlinedButtonExample(onClick: () -\u003e Unit) {\n OutlinedButton(onClick = { onClick() }) {\n Text(\"Outlined\")\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L85-L90\n```\n\n\u003cbr /\u003e\n\nThis implementation appears as shown:\nFigure 4. An outlined button.\n\nElevated 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. It is a filled button\nthat includes a shadow.\n\nThe snippet shows how to implement the component:\n\n\n```kotlin\n@Composable\nfun ElevatedButtonExample(onClick: () -\u003e Unit) {\n ElevatedButton(onClick = { onClick() }) {\n Text(\"Elevated\")\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L76-L81\n```\n\n\u003cbr /\u003e\n\nThis implementation appears as shown:\nFigure 5. An elevated button.\n\nText 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. It appears as\nonly text until pressed. It does not have a solid fill or outline by default.\n\nThe snippet shows how to implement the component:\n\n\n```kotlin\n@Composable\nfun TextButtonExample(onClick: () -\u003e Unit) {\n TextButton(\n onClick = { onClick() }\n ) {\n Text(\"Text Button\")\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L94-L101\n```\n\n\u003cbr /\u003e\n\nThis implementation appears as shown:\nFigure 6. A text button.\n\nAdditional resources\n\n- [Floating action button](/develop/ui/compose/components/fab)\n- [Material Design 3 Buttons overview](https://m3.material.io/components/buttons/overview)"]]