Tombol

Tombol adalah indikator visual utama untuk tindakan pengguna.

Prinsip

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

Umpan Balik yang Jelas: Tampilan tombol harus berubah secara jelas di berbagai status interaksi (melayang, tekan, fokus) untuk memberikan umpan balik 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 sendiri atau dengan komponen lain, seperti kartu dan daftar.

check_circle

Anjuran

Gunakan pengungkapan progresif untuk menampilkan tindakan yang kurang relevan.

cancel

Larangan

Memenuhi tampilan pengguna dengan terlalu banyak tombol.

check_circle

Anjuran

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

cancel

Larangan

menggunakan tombol sebagai elemen dekoratif statis.

Anatomi

Penyesuaian

Tombol berisi variasi default dan besar, beserta status default, terfokus, dan ditekan untuk setiap tombol. Ikon dapat digunakan untuk memberikan penekanan, klarifikasi, dan pengenalan yang lebih besar pada tombol. Ukuran tombol dapat membantu menekankan pentingnya.