Tombol

Tombol adalah indikator visual utama untuk tindakan pengguna.

Elemen desain harus ditambatkan ke bagian bawah bingkai.

Prinsip

Berorientasi pada Tindakan (Action-Oriented): Tombol harus mengomunikasikan dengan jelas bahwa tombol tersebut memicu tindakan.

Masukan yang Jelas: Tampilan tombol harus berubah secara jelas di berbagai status interaksi (melayang, tekan, fokus) untuk memberikan masukan langsung.

Konsisten: Semua tombol harus memiliki bahasa visual inti yang sama agar dapat langsung dikenali.

Fleksibel: Komponen tombol harus mengakomodasi variasi umum, seperti menyertakan ikon dan ukuran yang berbeda, tanpa mengorbankan konsistensi.

Penggunaan & Penempatan

Tombol harus ditempatkan dekat dengan konten yang relevan. Komponen ini dapat ditempatkan sendirian atau dengan komponen lain, seperti kartu dan daftar.

Anjuran

Gunakan pengungkapan progresif untuk menampilkan tindakan yang kurang relevan.

Larangan

Memenuhi tampilan pengguna dengan terlalu banyak tombol. Gunakan grup tombol sebagai gantinya.

Anjuran

Gunakan tombol untuk meminta tindakan. Atau gunakan chip judul untuk elemen statis.

Larangan

Gunakan tombol sebagai elemen dekoratif statis.

Tombol ikon

Tombol ikon tersedia untuk mengurangi kepadatan konten. Gunakan tombol ikon jika ikon menggambarkan tindakan dengan jelas, atau sertakan label tombol.

Anjuran

Gunakan tombol ikon untuk tindakan umum yang sangat mudah dikenali.

Larangan

Gunakan tombol ikon untuk tindakan yang sangat tidak jelas.

Dapat diaktifkan/dinonaktifkan

Untuk tindakan dengan status boolean, seperti favorit, varian tombol tersedia untuk setiap jenis tombol. Menukar ikon di antara status tombol membuat interaksi dapat dilihat sekilas dan responsif.

Anjuran

Gunakan tombol toggle jika ada opsi boolean untuk suatu tindakan. Seperti mulai/berhenti.

Larangan

Gunakan tombol ganti untuk tindakan non-biner.

Anatomi

Tombol terdiri dari label dan ikon di awal atau akhir yang bersifat opsional.

Tombol default

Tombol ikon hanya terdiri dari ikon yang mudah dikenali.

Keduanya memiliki varian yang dapat diaktifkan/dinonaktifkan.

Default

Tombol default 1. Istirahat
2. Fokus
3. Ditekan
4. Nonaktif
5. Dinonaktifkan & difokuskan

Besar

Gaya tombol besar 1. Istirahat
2. Fokus
3. Ditekan
4. Nonaktif
5. Dinonaktifkan & difokuskan

Ikon

Tombol ikon 1. Istirahat
2. Fokus
3. Ditekan
4. Nonaktif
5. Dinonaktifkan & difokuskan

Ikon

Tombol ikon 1. Istirahat
2. Fokus
3. Ditekan
4. Nonaktif
5. Dinonaktifkan & difokuskan

Penyesuaian

Tombol berisi gaya default dan besar. Ukuran besar dapat membantu menekankan kepentingan.

Ikon dapat digunakan untuk memberikan penekanan, klarifikasi, dan pengenalan yang lebih besar pada tombol di posisi akhir atau awal.

Default

Properti Penyesuaian Default
Bentuk Ya Besar, Lingkaran
Padding Ya 16 dp, 8 dp
Batas Ya Default, 2 dp, #606460
Teks Ya Body Small
Ikon utama Ya 32 dp
Ikon di akhir Ya 32 dp
Ukuran Ya Tinggi minimum 48 dp
Tebal Ya 0
Gap Ya Antara label dan ikon: Sangat kecil

Besar

Properti Penyesuaian Default
Bentuk Ya Besar, Lingkaran
Padding Ya 16 dp, 16 dp
Batas Ya 2 dp, #606460
Teks Ya Body Small
Ikon utama Ya 32 dp
Ikon di akhir Ya 32 dp
Ukuran Ya Tinggi minimum 72 dp
Tebal Ya 0
Gap Ya Antara label dan ikon: Sangat kecil

Ikon

Properti Penyesuaian Default
Bentuk Ya Besar, Lingkaran
Padding Ya Kecil, Kecil
Batas Ya Default
Ikon Ya Default = 32 dp, Di Permukaan
Ukuran Ya Tinggi minimum 48 dp
Tebal Ya 0

Dapat diaktifkan/dinonaktifkan

Properti Penyesuaian Default
Dipilih Ya Boolean
Sudut default Ya 16 dp, 8 dp
Sudut yang dipilih Ya Fokus default
Warna Permukaan yang dipilih Ya Garis batas
Semua properti lainnya Ya Sama seperti tombol

Ikon yang dapat diaktifkan/dinonaktifkan

Properti Penyesuaian Default
Dipilih Ya Boolean
Sudut default Ya 100 dp
Sudut yang dipilih Ya 20 dp
Warna Permukaan yang dipilih Ya Garis batas
Semua properti lainnya Ya Sama seperti tombol

Sebelumnya
Ikon
Berikutnya
Grup tombol