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

Default

1. Diaktifkan: Status default. 2. Melayang 3. Ketuk

Besar

1. Diaktifkan: Status default. 2. Melayang 3. Ketuk

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.

Default

Properti	Penyesuaian	Default
Bentuk	Ya	Besar, Lingkaran
Padding	Ya	16 dp, 8 dp
Batas	Ya	2 dp, #606460
Teks	Ya	Body Kecil
Ikon utama	Ya	40 dp
Ikon berikutnya	Ya	40 dp
Ukuran	Ya	Tinggi minimum 56 dp
Tebal	Ya	0

Besar

Properti	Penyesuaian	Default
Bentuk	Ya	Besar, Lingkaran
Padding	Ya	20 dp, 8 dp
Batas	Ya	2 dp, #606460
Teks	Ya	Body Kecil
Ikon utama	Ya	56 dp
Ikon berikutnya	Ya	56 dp
Ukuran	Ya	Tinggi minimum 72 dp
Tebal	Ya	0
Platform	Tidak