Tombol
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Gunakan komponen Button untuk tindakan yang dapat dipahami dengan baik oleh pengguna dan tidak memerlukan label teks. Tombol dibedakan dari chip berdasarkan bentuknya yang melingkar.
Anatomi
A. Konten
Tombol memiliki satu slot yang disediakan untuk ikon atau teks. Pilih ikon yang relevan dengan tindakan yang dilakukan tombol. Anda dapat menggunakan teks dengan maksimum tiga karakter jika ikon tidak dapat mendeskripsikan tindakan yang relevan. Pertimbangkan penggunaan komponen Chip jika ikon tidak dapat mendeskripsikan tindakannya dengan jelas
B. Penampung
Penampung tombol dibatasi hingga satu pengisian warna solid.
Tombol
Tombol memungkinkan pengguna beralih di antara dua status.
Tombol ringkas
Tombol ringkas tampak lebih kecil, tetapi memiliki area ketuk yang lebih besar. Area ketuk default adalah 48x48 dp.
Hierarki
Gunakan isi warna yang berbeda untuk menunjukkan hierarki tombol.
Penekanan tinggi
Tombol penekanan tinggi berisi tindakan utama untuk aplikasi. Untuk tombol penekanan tinggi, gunakan warna Primary atau Secondary untuk penampung dan warna On Primary atau On Secondary untuk konten. Untuk informasi selengkapnya, lihat Tema Material Wear.
Penekanan sedang
Tombol penekanan sedang dapat dikenali karena isian warna yang kurang kontras. Chip ini berisi tindakan yang kurang penting dibandingkan tindakan utama. Gunakan warna Surface untuk penampung dan warna On Surface untuk konten.
Atau, gunakan komponen OutlinedButton kustom untuk tombol penekanan sedang. Tombol ini memiliki latar belakang transparan, goresan warna varian utama opasitas 60%, dan konten berwarna utama.
Penekanan rendah (khusus ikon)
Tombol penekanan rendah dapat dikenali karena tidak memiliki isi. Jenis ini sangat cocok untuk area yang lebih kecil pada tampilan jam yang memerlukan pengaturan ringkas. Menggunakan warna On Surface untuk konten.
Ukuran
Gunakan tombol dengan ukuran yang berbeda untuk menekankan atau menurunkan penekanan pada tindakan.
Besar
Ikon (30 x 30 dp)
Penampung (60 x 60 dp)
Default
Ikon (26 x 26 dp)
Penampung (52 x 52 dp)
Kecil
Ikon (24 x 24 dp)
Penampung (48 x 48 dp)
Ekstra Kecil
Ikon (24 x 24 dp)
Penampung (32 x 32 dp)
Sebaiknya tambahkan padding tambahan di sekitar tombol ini untuk membuat target ketuk minimal 48 dp. Ini adalah ukuran target ketuk minimum kami untuk aksesibilitas.
Penggunaan
Gunakan tombol standar untuk memungkinkan pengguna melakukan satu tindakan seperti menerima atau menolak panggilan, atau memulai timer.
Gunakan tombol agar pengguna dapat mengaktifkan atau menonaktifkan opsi, seperti memilih dan membatalkan pilihan hari dalam seminggu, atau menjeda dan memulai ulang timer.
Tata letak adaptif
Perilaku responsif
1 tombol
Padding internal akan tetap sama, dan margin harus berupa persentase untuk mencegah tombol meregang terlalu jauh, dan mempertahankan ukuran relatif.
2 tombol
Jika ada 2 tombol, margin internal persentase akan ditambahkan untuk mencegah tombol meregang terlalu jauh, dan mempertahankan ukuran relatif.
IME
1 atau 2 Tombol
IME dengan 2 atau satu tombol yang terkunci selalu meluas hingga ke margin samping, terlepas dari ukuran layar.
3 Tombol
Pada layar yang lebih kecil dari 225 dp, tombol tetap berbentuk lingkaran dan tidak meregang. Pada layar yang lebih besar, 225 dp atau lebih besar, tombol akan meluas hingga ke margin samping.
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-07-27 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-07-27 UTC."],[],[],null,["# Buttons\n\nUse a [Button](/reference/kotlin/androidx/wear/compose/material/package-summary#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for actions that are well understood by users and don't need a text label. Buttons are distinguished from chips by their circular shape.\n\nAnatomy\n-------\n\n\n**A. Content**\n\nButtons have a single slot reserved for an icon or text. Choose an icon that is relevant to the action the button performs. You can use text with a maximum of three characters if an icon is unable to describe the relevant action. Consider the use of a Chip component if an icon cannot clearly describe the action\n\n**B. Container**\n\nButton containers are limited to a single solid color fill.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nButton types\n------------\n\n\n**Toggle buttons**\n\n[Toggle buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) enable users to toggle between two states. \n\n**Compact buttons**\n\n[Compact buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#CompactButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) appear smaller but have a larger tappable area. The default tappable area is 48x48 dp.\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\n\nUse different color fills to denote button hierarchy.\n\n**High emphasis**\n\nHigh emphasis buttons contain actions that are primary to the app. For high emphasis buttons use Primary or Secondary colors for the container and On Primary and On Secondary colors for the content. For more information see [Wear Material Theming](/training/wearables/design/theme).\n\n**Medium emphasis**\n\nMedium emphasis buttons are distinguished by a less contrasting color fill. They contain actions that are less important than the primary actions. Use the Surface color for the container and the On Surface color for the content.\n\nAlternatively, use the custom [OutlinedButton](/reference/kotlin/androidx/wear/compose/material/package-summary#OutlinedButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for a medium emphasis button. This has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content.\n**Low emphasis (icon only)**\n\n\u003cbr /\u003e\n\nLow emphasis buttons are distinguished by having no fill. They are best suited for smaller areas on the watch face where a compact arrangement is needed. Use the On Surface colour for the content.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\nUse buttons of different sizes to emphasize or de-emphasize actions.\n\n\n**Large**\n\nIcon (30 x 30 dp) \nContainer (60 x 60 dp) \n\n**Default**\n\nIcon (26 x 26 dp) \nContainer (52 x 52 dp)\n\n\u003cbr /\u003e\n\n\n**Small**\n\nIcon (24 x 24 dp) \nContainer (48 x 48 dp) \n\n**Extra Small**\n\nIcon (24 x 24 dp) \nContainer (32 x 32 dp)\n\n\nIt's recommended to add additional padding around this button to create a tap target of at least 48 dp. This is our minimum tap target size for accessibility.\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nUse standard buttons to enable the user to take a single action such as accepting or declining a call, or starting a timer.\n\nUse toggle buttons to allow the user to turn an option on or off, such as selecting and deselecting days of the week or pausing and restarting a timer.\n\nAdaptive layouts\n----------------\n\n### **Responsive behavior**\n\n\n**1 button**\n\nThe internal padding will remain the same, and the margins should be percentages in order to stop the buttons from stretching too far, and keeping a relative size. \n\n**2 buttons**\n\nWhen there are 2 buttons, percentage internal margins are added in order to stop the buttons from stretching too far, and keeping a relative size.\n\n\u003cbr /\u003e\n\n### **IMEs**\n\n**1 or 2 Buttons**\n\nIMEs with 2 or a single button lockup always stretch all the way to the side margins regardless of screen size.\n\n**3 Buttons**\n\nOn screens smaller than 225 dp, the buttons remain circular and do not stretch. On larger screens, 225 dp or larger, the buttons stretch all the way to the side margins."]]
