Button
Tombol adalah komponen mendasar yang memungkinkan pengguna untuk memicu tindakan. Ada lima jenis tombol. Tabel berikut menjelaskan tampilan dari masing-masing dari kelima jenis tombol, serta di mana Anda harus menggunakan mereka.
Jenis |
Tampilan |
Tujuan |
---|---|---|
Terisi |
Latar belakang solid dengan teks yang kontras. |
Tombol dengan penekanan tinggi. Ini adalah tindakan utama dalam permohonan, seperti "kirim" dan "simpan". Efek bayangan menekankan pentingnya tombol. |
Tonal terisi |
Warna latar belakang bervariasi sesuai dengan platform. |
Juga untuk tindakan utama atau signifikan. Tombol yang terisi memberikan lebih banyak bobot visual dan fungsi yang sesuai seperti "tambahkan ke keranjang" dan "Login". |
Hangat |
Tonjol dengan memiliki bayangan. |
Cocok dengan peran yang mirip dengan tombol tonal. Tingkatkan ketinggian agar tombol muncul lebih mencolok. |
Tergarisbatasi |
Menampilkan batas tanpa isian. |
Tombol dengan penekanan sedang, berisi tindakan yang penting tetapi bukan utama. Tombol ini sangat cocok dengan tombol lain untuk menunjukkan tindakan sekunder dan alternatif seperti "Cancel" atau "Kembali". |
Teks |
Menampilkan teks tanpa latar belakang atau batas. |
Tombol dengan penekanan rendah, ideal untuk tindakan yang kurang penting seperti link navigasi, atau fungsi sekunder seperti "Pelajari Selengkapnya" atau "Lihat detail". |
Gambar berikut menunjukkan lima jenis tombol dalam Material Design.
Platform API
onClick
: Fungsi yang dipanggil saat pengguna menekan tombol.enabled
: Jika salah (false), parameter ini akan menyebabkan tombol muncul tidak tersedia dan tidak aktif.colors
: InstanceButtonColors
yang menentukan warna yang digunakan dalam tombolnya.contentPadding
: Padding dalam tombol.
Tombol terisi
Komponen tombol yang terisi menggunakan composable Button
dasar. Penting
diisi dengan warna solid secara {i>default<i}. Cuplikan berikut menunjukkan cara
implementasikan komponen tersebut:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
Implementasi ini muncul sebagai berikut:
![Tombol yang terisi dengan latar belakang ungu yang bertuliskan, 'filled'.](https://developer.android.com/static/develop/ui/compose/images/components/button-filled.png?authuser=8&hl=id)
Tombol tonal terisi
Komponen tombol tonal yang terisi menggunakan composable FilledTonalButton
.
Secara default, kolom ini diisi dengan warna tonal.
Cuplikan berikut menunjukkan cara menerapkan komponen:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
Implementasi ini muncul sebagai berikut:
![Tombol tonal dengan latar belakang ungu muda yang bertuliskan, 'filled'.](https://developer.android.com/static/develop/ui/compose/images/components/button-tonal.png?authuser=8&hl=id)
Tombol dengan garis batas
Komponen tombol garis batas menggunakan composable OutlinedButton
. Ini
muncul dengan garis batas secara {i>default<i}.
Cuplikan berikut menunjukkan cara menerapkan komponen:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
Implementasi ini muncul sebagai berikut:
![Tombol transparan dengan batas gelap yang bertuliskan, 'Garis Besar'.](https://developer.android.com/static/develop/ui/compose/images/components/button-outlined.png?authuser=8&hl=id)
Tombol yang dinaikkan
Komponen tombol yang ditinggikan menggunakan composable ElevatedButton
. Memiliki
bayangan yang mewakili efek elevasi secara {i>default<i}. Perhatikan bahwa
pada dasarnya tombol berbentuk
garis batas dengan bayangan.
Cuplikan berikut menunjukkan cara menerapkan komponen:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
Implementasi ini muncul sebagai berikut:
![Tombol yang ditinggikan dengan latar belakang abu-abu yang bertuliskan, 'Ditinggikan'.](https://developer.android.com/static/develop/ui/compose/images/components/button-elevated.png?authuser=8&hl=id)
Tombol teks
Komponen tombol teks menggunakan composable TextButton
. Sampai ditekan,
muncul sebagai teks saja. Secara default, peta ini tidak memiliki isian atau garis luar yang solid.
Cuplikan berikut menunjukkan cara menerapkan komponen:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
Implementasi ini muncul sebagai berikut:
![Tombol teks yang bertuliskan 'Tombol Teks'](https://developer.android.com/static/develop/ui/compose/images/components/button-text.png?authuser=8&hl=id)