Warna latar belakang bervariasi agar sesuai dengan permukaan.
Untuk tindakan utama atau signifikan. Tombol yang terisi memberikan bobot visual dan sesuai untuk tindakan seperti "Tambahkan ke keranjang" dan "Login".
Untuk tindakan yang penting, tetapi bukan tindakan utama. Tombol dengan garis batas cocok dipasangkan dengan tombol lain untuk menunjukkan tindakan alternatif sekunder seperti "Batal" atau "Kembali".
Untuk tindakan yang kurang penting seperti link navigasi, atau tindakan sekunder seperti "Pelajari lebih lanjut" atau "Lihat detail".
Kompatibilitas versi
Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau
yang lebih tinggi.
Dependensi
Membuat tombol isi
Komponen tombol yang terisi menggunakan composable Button dasar. Secara default,
warnanya diisi dengan warna solid.
Hasil
Gambar 1. Tombol yang terisi.
Membuat tombol tonal yang terisi
Komponen tombol tonal yang terisi menggunakan composable FilledTonalButton.
Secara default, warna ini diisi dengan warna tonal.
Hasil
Gambar 2. Tombol tonal.
Membuat tombol dengan garis batas
Komponen tombol yang digarisbatasi menggunakan composable OutlinedButton. Secara default,
tampilannya akan muncul dengan garis batas.
Hasil
Gambar 3. Tombol dengan garis batas.
Membuat tombol yang ditinggikan
Komponen tombol yang ditinggikan menggunakan composable ElevatedButton. Tombol ini memiliki
bayangan yang mewakili efek elevasi secara default dan muncul sebagai
tombol yang digarisbatasi dengan bayangan.
Hasil
Gambar 4. Tombol yang muncul.
Membuat tombol teks
Komponen tombol teks menggunakan composable TextButton. Hingga diklik,
ikon hanya akan muncul sebagai teks. Secara default, bentuk ini tidak memiliki isian atau garis batas yang solid.
Hasil
Gambar 5. Tombol teks.
Poin utama
onClick: Fungsi yang dipanggil saat pengguna menekan tombol.
enabled: Jika salah, parameter ini akan menyebabkan tombol tampak
tidak tersedia dan tidak aktif.
colors: Instance ButtonColors yang menentukan warna yang digunakan di
tombol.
contentPadding: Padding dalam tombol.
Koleksi yang berisi panduan ini
Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas
sasaran pengembangan Android yang lebih luas:
Menampilkan komponen interaktif
Pelajari cara fungsi composable dapat memudahkan Anda
membuat komponen UI yang menarik berdasarkan sistem desain
Desain Material.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-02-06 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 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)"]]
