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 tindakan utama dalam permohonan, 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.

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. Class ini diisi dengan warna solid secara default. Cuplikan berikut menunjukkan cara mengimplementasikan komponen:

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

Catatan: Jika Anda ingin membuat tombol kustom, gunakan composable Button.

Implementasi ini muncul sebagai berikut:

Gambar 2. Tombol yang terisi.

Tombol tonal 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:

Gambar 3. Tombol tonal.

Tombol dengan garis batas

Komponen tombol dengan garis tepi menggunakan composable OutlinedButton. Ikon ini muncul bersama garis batas secara default.

Cuplikan berikut menunjukkan cara menerapkan komponen:

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

Implementasi ini muncul sebagai berikut:

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:

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:

Gambar 6. Tombol teks.

Referensi lainnya

• Tombol tindakan mengambang
• Dokumen Material UI