Button

Tombol adalah komponen mendasar yang memungkinkan pengguna untuk memicu tindakan. Ada lima jenis tombol. Tabel berikut menjelaskan tampilan dari masing-masing dari kelima jenis tombol, serta di mana Anda harus menggunakan mereka.

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.

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 "Login".

Hangat

Tonjol dengan memiliki bayangan.

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

Tergarisbatasi

Menampilkan batas tanpa isian.

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 implementasikan komponen tersebut:

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

Implementasi ini muncul sebagai berikut:

Tombol tonal dengan latar belakang ungu muda yang bertuliskan, 'filled'.
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 garis batas.

Tombol yang dinaikkan

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 yang ditinggikan.

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