Tombol

Tombol adalah indikator visual utama untuk tindakan pengguna.

Elemen desain harus ditambatkan ke bagian bawah
frame.

Prinsip

Berorientasi pada Tindakan (Action-Oriented): Tombol harus menyampaikan 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. Chip dapat ditempatkan sendiri 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.

Anjuran

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

Larangan

menggunakan tombol sebagai elemen dekoratif statis.

Anatomi

Default

1. Diaktifkan: Status default. 2. Arahkan kursor 3. Ketuk

Besar

1. Diaktifkan: Status default. 2. Arahkan kursor 3. Ketuk

Penyesuaian

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

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 di akhir	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 di akhir	Ya	56 dp
Ukuran	Ya	Tinggi minimum 72 dp
Tebal	Ya	0
Platform	Tidak