Button

Tombol adalah komponen dasar 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 penekanan tinggi. Tindakan ini ditujukan untuk tindakan utama dalam aplikasi, seperti "kirim" dan "simpan". Efek bayangan menekankan pentingnya tombol.

Tone penuh

Warna latar belakang bervariasi agar sesuai dengan permukaan.

Juga untuk tindakan utama atau penting. Tombol yang diisi memberikan bobot visual yang lebih besar dan sesuai untuk fungsi seperti "tambahkan ke keranjang" dan "Login".

Panas

Tampil berbeda dengan memiliki bayangan.

Sesuai dengan peran yang serupa dengan tombol tonal. Tingkatkan elevasi agar tombol muncul lebih menonjol.

Tergarisbatasi

Menampilkan batas tanpa pengisian.

Tombol penekanan sedang, yang berisi tindakan yang penting tetapi bukan utama. Tombol ini cocok dipasangkan dengan tombol lain untuk menunjukkan tindakan kedua dan alternatif 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 Desain Material.

Contoh masing-masing dari lima komponen tombol, dengan karakteristik uniknya yang disoroti.
Gambar 1. Lima komponen tombol.

Platform API

  • onClick: Fungsi yang dipanggil saat pengguna menekan tombol.
  • enabled: Jika salah (false), parameter ini menyebabkan tombol muncul tidak tersedia dan tidak aktif.
  • colors: Instance ButtonColors yang menentukan warna yang digunakan dalam tombol.
  • contentPadding: Padding dalam tombol.

Tombol terisi

Komponen tombol terisi menggunakan composable Button dasar. Secara default, diisi dengan warna solid. Cuplikan berikut menunjukkan cara mengimplementasikan komponen:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Penerapan ini akan terlihat seperti berikut:

Tombol terisi dengan latar belakang ungu yang bertuliskan 'filled'.
Gambar 2. Tombol terisi.

Tombol tone terisi

Komponen tombol tonal yang diisi menggunakan composable FilledTonalButton. Secara default, diisi dengan warna tonal.

Cuplikan berikut menunjukkan cara menerapkan komponen:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Penerapan ini akan terlihat seperti berikut:

Tombol tonal dengan latar belakang ungu muda yang bertuliskan 'filled'.
Gambar 3. Tombol tonal.

Tombol bergaris tepi

Komponen tombol bergaris menggunakan composable OutlinedButton. Secara default, batasnya ditampilkan dengan garis luar.

Cuplikan berikut menunjukkan cara menerapkan komponen:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Penerapan ini akan terlihat seperti berikut:

Tombol bergaris batas transparan dengan batas gelap yang bertuliskan, 'Bergaris batas'.
Gambar 4. Tombol bergaris tepi.

Tombol timbul

Komponen tombol yang ditinggikan menggunakan composable ElevatedButton. Secara default, kartu memiliki bayangan yang menunjukkan efek ketinggian. Perhatikan bahwa tombol ini pada dasarnya adalah tombol bergaris dengan bayangan.

Cuplikan berikut menunjukkan cara menerapkan komponen:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

Penerapan ini akan terlihat seperti berikut:

Tombol timbul dengan latar belakang abu-abu yang bertuliskan 'Timbul'.
Gambar 5. Tombol timbul.

Tombol teks

Komponen tombol teks menggunakan composable TextButton. Sebelum ditekan, tombol ini hanya muncul sebagai teks. Secara default, tidak memiliki warna solid atau garis batas.

Cuplikan berikut menunjukkan cara menerapkan komponen:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Penerapan ini akan terlihat seperti berikut:

Tombol teks yang bertuliskan 'Tombol Teks'
Gambar 6. Tombol teks.

Referensi lainnya