Tombol

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.

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

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

Implementasi ini akan muncul sebagai berikut:

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

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

Implementasi ini akan muncul sebagai berikut:

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

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

Implementasi ini akan muncul sebagai berikut:

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

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

Implementasi ini akan muncul sebagai berikut:

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

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

Implementasi ini akan muncul sebagai berikut:

Tombol teks yang bertuliskan 'Text Button'
Gambar 6. Tombol teks.

Referensi tambahan