Tombol adalah komponen dasar yang memungkinkan pengguna memicu tindakan yang ditentukan. Ada lima jenis tombol. Tabel berikut menjelaskan penampilan kelima jenis tombol, serta tempat Anda harus menggunakannya.
Jenis |
Tampilan |
Tujuan |
---|---|---|
Terisi |
Latar belakang solid dengan teks yang kontras. |
Tombol dengan penekanan tinggi. Ini adalah untuk tindakan utama dalam permohonan, seperti "kirim" dan "simpan". Efek bayangan menekankan pentingnya tombol. |
Tonal terisi |
Warna latar belakang bervariasi agar sesuai dengan permukaan. |
Juga untuk tindakan utama atau signifikan. Tombol yang terisi memberikan lebih banyak fungsi visual dan fungsi setelan seperti "tambahkan ke keranjang" dan "Login". |
Hangat |
Tampil beda dengan bayangan. |
Sesuai dengan peran yang mirip dengan tombol tonal. Naikkan ketinggian agar tombol terlihat lebih mencolok. |
Tergarisbatasi |
Menampilkan batas tanpa isian. |
Tombol dengan penekanan sedang, berisi tindakan yang penting tetapi bukan utama. Tombol tersebut tersambung dengan baik dengan tombol lain untuk menunjukkan tindakan sekunder alternatif seperti "Batal" atau "Kembali". |
Teks |
Menampilkan teks tanpa latar belakang atau batas. |
Tombol dengan penekanan rendah, cocok untuk tindakan yang tidak terlalu 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 bernilai 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. Secara default,
modul ini diisi dengan warna solid. Cuplikan berikut menunjukkan cara
menerapkan komponen:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
Implementasi ini akan muncul sebagai berikut:
Tombol tonal terisi
Komponen tombol tonal yang terisi menggunakan composable FilledTonalButton
.
Secara default, warna ini diisi dengan warna tonal.
Cuplikan berikut menunjukkan cara menerapkan komponen:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
Implementasi ini akan muncul sebagai berikut:
Tombol garis batas
Komponen tombol yang diuraikan menggunakan composable OutlinedButton
. Panel
ini muncul dengan garis batas secara default.
Cuplikan berikut menunjukkan cara menerapkan komponen:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
Implementasi ini akan muncul sebagai berikut:
Tombol timbul
Komponen tombol yang ditinggikan menggunakan composable ElevatedButton
. Class ini memiliki
bayangan yang mewakili efek elevasi secara default. Perhatikan bahwa ini
pada dasarnya adalah tombol dengan bayangan.
Cuplikan berikut menunjukkan cara menerapkan komponen:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
Implementasi ini akan muncul sebagai berikut:
Tombol teks
Komponen tombol teks menggunakan composable TextButton
. Hingga ditekan,
muncul sebagai teks saja. Secara default, elemen ini tidak memiliki isian atau garis batas solid.
Cuplikan berikut menunjukkan cara menerapkan komponen:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
Implementasi ini akan muncul sebagai berikut: