Tombol

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

Jenis Tampilan Tujuan
Terisi Latar belakang solid dengan teks kontras. Tombol penekanan tinggi. Tombol ini digunakan untuk tindakan utama dalam aplikasi, seperti "kirim" dan "simpan". Efek bayangan menyoroti pentingnya tombol.
Tonal terisi Warna latar belakang bervariasi agar sesuai dengan permukaan. Juga untuk tindakan utama atau signifikan. Tombol tonal terisi memberikan bobot visual yang lebih besar dan sesuai untuk fungsi seperti "tambahkan ke keranjang" dan "Login".
Panas Tampak menonjol karena memiliki bayangan. Memiliki fungsi yang mirip dengan tombol tonal. Tingkatkan elevasi untuk membuat tombol terlihat lebih jelas.
Tergarisbatasi Menampilkan batas tanpa isian. Tombol penekanan sedang, yang berisi tindakan yang penting, tetapi tidak 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 ini menunjukkan lima jenis tombol di Desain Material:

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

Platform API

onClick
Fungsi yang dipanggil sistem saat pengguna menekan tombol.
enabled
Jika false, parameter ini membuat tombol tampak tidak tersedia dan tidak aktif.
colors
Instance ButtonColors yang menentukan warna yang digunakan dalam tombol.
contentPadding
Padding dalam tombol.

Tombol terisi penuh

Komponen tombol terisi menggunakan composable Button dasar. Secara default, elemen ini diisi dengan warna solid. Cuplikan ini menunjukkan cara mengimplementasikan komponen dan melihat pratinjaunya secara interaktif:

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

Tombol tonal terisi

Komponen tombol tonal terisi menggunakan composable FilledTonalButton. Secara default, tombol ini diisi dengan warna tonal.

Cuplikan ini menunjukkan cara mengimplementasikan komponen dan melihat pratinjaunya secara interaktif:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}

Tombol dengan garis batas

Komponen tombol dengan garis batas menggunakan composable OutlinedButton. Secara default, elemen ini muncul dengan garis batas.

Cuplikan ini menunjukkan cara mengimplementasikan komponen dan melihat pratinjaunya secara interaktif:

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

Tombol timbul

Komponen tombol yang ditinggikan menggunakan composable ElevatedButton. Tombol ini memiliki bayangan yang merepresentasikan efek elevasi secara default. Tombol ini adalah tombol terisi penuh yang menyertakan bayangan.

Cuplikan ini menunjukkan cara mengimplementasikan komponen dan melihat pratinjaunya secara interaktif:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}

Tombol teks

Komponen tombol teks menggunakan composable TextButton. Tombol ini hanya muncul sebagai teks hingga ditekan. Secara default, elemen ini tidak memiliki isian atau garis batas yang solid.

Cuplikan ini menunjukkan cara mengimplementasikan komponen dan melihat pratinjaunya secara interaktif:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}

Referensi lainnya