Tombol adalah komponen fundamental yang memungkinkan pengguna memicu tindakan yang ditentukan. Ada lima jenis tombol. Tabel berikut menjelaskan tampilan masing-masing dari lima jenis tombol, serta tempat Anda harus menggunakannya.
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 "Masuk". |
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 tersebut berpasangan dengan baik dengan tombol lain untuk menunjukkan tindakan alternatif dan sekunder seperti "Batal" 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 Lebih Lanjut" 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 tampak tidak tersedia dan tidak aktif.colors
: InstanceButtonColors
yang menentukan warna yang digunakan dalam tombol.contentPadding
: Padding dalam tombol.
Tombol terisi
Komponen tombol yang terisi menggunakan composable Button
dasar. Class ini
diisi dengan warna solid secara default. Cuplikan berikut menunjukkan cara
menerapkan komponen:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
Implementasi ini muncul sebagai berikut:
Tombol tonal terisi
Komponen tombol tonal yang terisi menggunakan composable FilledTonalButton
.
Tema ini diisi dengan warna tonal secara default.
Cuplikan berikut menunjukkan cara menerapkan komponen:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
Implementasi ini muncul sebagai berikut:
Tombol dengan garis batas
Komponen tombol garis batas menggunakan composable OutlinedButton
. Ikon ini
muncul bersama garis batas secara default.
Cuplikan berikut menunjukkan cara menerapkan komponen:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
Implementasi ini muncul sebagai berikut:
Tombol yang dinaikkan
Komponen tombol yang ditinggikan menggunakan composable ElevatedButton
. Pola ini memiliki
bayangan yang mewakili efek elevasi secara default. Perhatikan bahwa
pada dasarnya ini adalah tombol yang diberi 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 teks
Komponen tombol teks menggunakan composable TextButton
. Sampai ditekan,
akan 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: