Tombol

Tombol adalah komponen fundamental yang memungkinkan pengguna memicu tindakan yang ditentukan. Ada lima jenis tombol. Tabel berikut menjelaskan tampilan masing-masing dari lima jenis tombol, serta tempat Anda harus menggunakannya.

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 "Masuk".
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 tersebut berpasangan dengan baik dengan tombol lain untuk menunjukkan tindakan alternatif dan 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 Material Design.

Platform API

• onClick: Fungsi yang dipanggil saat pengguna menekan tombol.
• enabled: Jika 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. Class ini diisi dengan warna solid secara default. Cuplikan berikut menunjukkan cara menerapkan komponen:

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

Implementasi ini muncul sebagai berikut:

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 dengan garis batas

Komponen tombol garis batas 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:

Tombol yang dinaikkan

Komponen tombol yang ditinggikan menggunakan composable ElevatedButton. Pola ini memiliki bayangan yang mewakili efek elevasi secara default. Perhatikan bahwa pada dasarnya ini adalah tombol yang diberi 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 teks

Komponen tombol teks menggunakan composable TextButton. Sampai ditekan, akan 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:

Referensi tambahan

• Tombol tindakan mengambang
• Dokumen UI Material