Butang

Jenis

1. Utama (Primary)
2. Sekunder (Secondary)
3. Warna Sekunder (Secondary Colour)
4. Tertiari (Tertiary)
5. Warna Tertiari (Tertiary Colour)
6. Bahaya Utama (Danger Primary)
7. Bahaya Sekunder (Danger Secondary)
8. Bahaya Tertiari (Danger Tertiary)

Saiz

Setiap saiz butang direka untuk memenuhi keperluan bentuk atau tindakan yang berbeza, memastikan keterbacaan dan pengalaman pengguna yang optimum.

Keadaan (States)

1. Asal: Penampilan awal apabila elemen tidak berinteraksi dengan pengguna.
2. Hover: Elemen yang berubah apabila tetikus pengguna berada di atasnya, memberikan maklum balas visual untuk menunjukkan interaktiviti.
3. Fokus: Penampilan apabila elemen dipilih atau aktif, biasanya melalui navigasi papan kekunci (TAB) atau klik tetikus. Keadaan ini penting untuk kebolehcapaian, membantu pengguna mengenal pasti elemen yang aktif.
4. Dilumpuhkan (Disabled): Elemen muncul apabila ia tidak tersedia untuk interaksi, menghalang pengguna daripada berinteraksi dengan elemen yang tidak aktif atau tidak tersedia.

Ikon hadapan & belakang

1. Ikon Hadapan: Diletakkan sebelum teks dalam butang, memberikan petunjuk visual tentang tujuan tindakan dengan cepat. Contoh: Ikon muat turun, ikon anak panah belakang, ikon tong sampah, ikon silang.

2. Ikon Belakang: Diletakkan selepas teks dalam butang, melengkapi teks dan menunjukkan tindakan tambahan atau arah. Contoh: Ikon anak panah hadapan.

Penghitung

Penghitung dalam butang adalah penunjuk angka kecil yang dipaparkan dalam butang.

Ia menyediakan gambaran visual tentang kiraan berkaitan fungsi butang, seperti bilangan penapis terpilih, notifikasi, atau item dalam troli.

Ikon sahaja

Butang yang hanya mengandungi ikon sebagai elemen visual utama yang dengan jelas menunjukkan tindakan atau fungsi tanpa teks.

Contoh: Ikon tambah, ikon pensil, ikon menu hamburger, ikon tong sampah.

Demo

Perhatikan bahawa butang bergerak ke bawah sebanyak 0.5 piksel apabila diklik.