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 dengan penekanan tinggi. Ini adalah tindakan utama dalam permohonan, 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.

Cocok dengan peran yang mirip dengan tombol tonal. Tingkatkan ketinggian agar tombol muncul lebih mencolok.

Tergarisbatasi

Menampilkan batas tanpa isian.

Tombol dengan penekanan sedang, berisi tindakan yang penting tetapi bukan utama. Tombol ini sangat cocok dengan tombol lain untuk menunjukkan tindakan sekunder dan alternatif seperti "Cancel" 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 Selengkapnya" atau "Lihat detail".

Gambar berikut menunjukkan lima jenis tombol dalam Material Design.

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

Platform API

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

Tombol terisi

Komponen tombol yang terisi menggunakan composable Button dasar. Penting diisi dengan warna solid secara {i>default<i}. 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 yang terisi dengan latar belakang ungu yang bertuliskan, &#39;filled&#39;.
Gambar 2. Tombol 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, &#39;filled&#39;.
Gambar 3. Tombol tonal.

Tombol dengan garis batas

Komponen tombol garis batas menggunakan composable OutlinedButton. Ini muncul dengan garis batas secara {i>default<i}.

Cuplikan berikut menunjukkan cara menerapkan komponen:

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

Implementasi ini muncul sebagai berikut:

Tombol transparan dengan batas gelap yang bertuliskan, &#39;Garis Besar&#39;.
Gambar 4. Tombol garis batas.

Tombol yang dinaikkan

Komponen tombol yang ditinggikan menggunakan composable ElevatedButton. Memiliki bayangan yang mewakili efek elevasi secara {i>default<i}. Perhatikan bahwa pada dasarnya tombol berbentuk garis batas 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 yang ditinggikan dengan latar belakang abu-abu yang bertuliskan, &#39;Ditinggikan&#39;.
Gambar 5. Tombol yang ditinggikan.

Tombol teks

Komponen tombol teks menggunakan composable TextButton. Sampai ditekan, muncul sebagai teks saja. Secara default, peta ini tidak memiliki isian atau garis luar 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 &#39;Tombol Teks&#39;
Gambar 6. Tombol teks.

Referensi lainnya