Button

bookmark_border Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

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.

Gambar berikut menunjukkan lima jenis tombol dalam Desain Material.

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. Secara default, warnanya diisi dengan warna solid. 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 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 dengan garis tepi menggunakan composable OutlinedButton. Secara default, tampilannya akan muncul dengan garis batas.

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. 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:

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:

Referensi lainnya

• Tombol tindakan mengambang
• Dokumen UI Material