Tombol

keywords: AiAssisted, product:JetpackCompose

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

Jenis Tampilan Tujuan
Terisi Latar belakang solid dengan teks yang kontras. Tombol penekanan tinggi. Tindakan ini adalah untuk tindakan utama dalam aplikasi, seperti "kirim" dan "simpan". Efek bayangan menyoroti pentingnya tombol.
Tone penuh Warna latar belakang bervariasi agar sesuai dengan permukaan. Juga untuk tindakan utama atau penting. Tombol tonal yang diisi memberikan bobot visual yang lebih besar dan sesuai untuk fungsi seperti "tambahkan ke keranjang" dan "Login".
Panas Tampil berbeda dengan memiliki bayangan. Memiliki tujuan yang sama dengan tombol tonal. Tingkatkan elevasi untuk membuat tombol muncul lebih jelas.
Tergarisbatasi Menampilkan batas tanpa pengisian. Tombol penekanan sedang, yang berisi tindakan yang penting tetapi bukan utama. Tombol ini cocok dipasangkan dengan tombol lain untuk menunjukkan tindakan kedua yang alternatif 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 dalam Desain Material:

Contoh masing-masing dari lima komponen tombol, dengan karakteristik uniknya yang disoroti.
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 di dalam tombol.

Tombol terisi

Komponen tombol yang diisi menggunakan composable Button dasar. Secara default, diisi dengan warna solid. Cuplikan ini menunjukkan cara menerapkan komponen:

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

Penerapan ini akan terlihat seperti yang ditunjukkan:

Tombol terisi penuh dengan latar belakang ungu yang bertuliskan 'Terisi'.
Gambar 2. Tombol terisi.

Tombol tone terisi

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

Cuplikan ini menunjukkan cara menerapkan komponen:

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

Penerapan ini akan terlihat seperti yang ditunjukkan:

Tombol tonal dengan latar belakang ungu muda yang bertuliskan 'Tonal'.
Gambar 3. Tombol tonal.

Tombol bergaris tepi

Komponen tombol bergaris menggunakan composable OutlinedButton. Secara default, batasnya ditampilkan dengan garis luar.

Cuplikan ini menunjukkan cara menerapkan komponen:

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

Penerapan ini akan terlihat seperti yang ditunjukkan:

Tombol bergaris batas transparan dengan batas gelap yang bertuliskan, 'Bergaris batas'.
Gambar 4. Tombol bergaris tepi.

Tombol timbul

Komponen tombol yang ditinggikan menggunakan composable ElevatedButton. Secara default, kartu memiliki bayangan yang menunjukkan efek ketinggian. Tombol ini adalah tombol terisi penuh yang menyertakan bayangan.

Cuplikan ini menunjukkan cara menerapkan komponen:

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

Penerapan ini akan terlihat seperti yang ditunjukkan:

Tombol timbul dengan latar belakang abu-abu yang bertuliskan 'Timbul'.
Gambar 5. Tombol timbul.

Tombol teks

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

Cuplikan ini menunjukkan cara menerapkan komponen:

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

Penerapan ini akan terlihat seperti yang ditunjukkan:

Tombol teks yang bertuliskan 'Tombol Teks'
Gambar 6. Tombol teks.

Referensi lainnya