Button

Tombol adalah komponen dasar yang memungkinkan pengguna memicu tindakan yang ditentukan. Ada lima jenis tombol. Tabel berikut menjelaskan tampilan dari 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. Ini adalah untuk tindakan utama dalam aplikasi, seperti "kirim" dan "simpan". Efek bayangan menekankan pentingnya tombol.

Tone terisi

Warna latar belakang bervariasi agar sesuai dengan permukaan.

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

Hangat

Tampil berbeda dengan memiliki bayangan.

Sesuai dengan peran yang serupa dengan tombol tonal. Tingkatkan elevasi agar tombol terlihat lebih jelas.

Tergarisbatasi

Memiliki batas tanpa isi.

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

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

Platform API

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

Tombol terisi

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

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

Implementasi ini muncul sebagai berikut:

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

Tombol tonal yang terisi penuh

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")
    }
}
Button.kt

Implementasi ini muncul sebagai berikut:

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

Tombol dengan garis batas

Komponen tombol dengan garis tepi menggunakan composable OutlinedButton. Secara default, tampilannya akan muncul dengan garis batas.

Cuplikan berikut menunjukkan cara menerapkan komponen:

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

Implementasi ini muncul sebagai berikut:

Tombol bergaris transparan dengan batas gelap yang bertuliskan, 'Outlined'.
Gambar 4. Tombol dengan garis batas.

Tombol timbul

Komponen tombol yang ditinggikan menggunakan composable ElevatedButton. Elemen ini memiliki bayangan yang mewakili efek elevasi secara default. Perhatikan bahwa ini pada dasarnya adalah tombol yang digarisbatasi dengan bayangan.

Cuplikan berikut menunjukkan cara menerapkan komponen:

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

Implementasi ini muncul sebagai berikut:

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

Tombol teks

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

Cuplikan berikut menunjukkan cara menerapkan komponen:

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

Implementasi ini muncul sebagai berikut:

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

Referensi lainnya