Button

Button adalah elemen interaktif yang digunakan untuk menjalankan tindakan tertentu di antarmuka. Komponen ini membantu pengguna berinteraksi dengan sistem secara langsung, seperti mengirim data, menyimpan perubahan, atau membuka halaman baru.

Penggunaan

Gunakan button untuk menjalankan tindakan yang spesifik, seperti mengirim formulir, menyimpan data, atau membuka halaman baru. Komponen ini membantu pengguna menyelesaikan tugas dengan cepat dan memastikan setiap tindakan terasa jelas dan terarah.

Button yang baik seharusnya mudah dikenali, jelas fungsinya, dan konsisten di seluruh antarmuka.

Ukuran

Tersedia lima ukuran button: 56px, 48px, 44px, 40px, dan 32px.

Setiap ukuran dirancang untuk tujuan dan konteks yang berbeda, tergantung pada ruang yang tersedia dan hierarki aksi di layar.

Jenis Button

Setiap jenis button memiliki tujuan spesifik. Pilih jenis button yang sesuai dengan konteks layar untuk menjaga pengalaman yang efisien dan mudah dipahami.

Memilih Button

Setiap jenis button memiliki tujuan spesifik. Pilih jenis button yang sesuai dengan konteks layar untuk menjaga pengalaman yang efisien dan mudah dipahami.

CTA (Call To Action)

Button yang dirancang untuk menarik perhatian pengguna dan mendorong tindakan langsung, seperti mengirim, menyimpan, atau melanjutkan proses.

Ikon

Button dapat menggunakan ikon di sisi kiri atau kanan untuk memperkuat makna tindakan. Umumnya digunakan untuk tugas berulang seperti menambah item baru, membuka menu, atau mengunduh dokumen.

Tautan (Link)

Button yang tampil menyerupai hyperlink, digunakan ketika tindakan mengarah ke halaman atau layar lain tanpa interaksi tambahan.

Cara Penggunaan yang Disarankan

✅ Disarankan

Menggunakan kata kerja dengan jelas dan mudah dipahami.

❌ Dihindari

Menggunakan kalimat panjang atau sulit dipahami dalam sekali baca.

✅ Disarankan

Menggunakan satu primary button untuk tindakan utama agar pilihan lebih jelas.

❌ Dihindari

Menampilkan lebih dari satu primary button dalam satu dialog.

Hierarki Button

Hierarki membantu membedakan prioritas tindakan berdasarkan ukuran, warna, dan posisi button. Prioritaskan hanya satu tindakan utama (Primary Button) di setiap layar untuk menjaga fokus pengguna.

Ikon

Button dapat menggunakan ikon di sisi kiri atau kanan untuk memperkuat makna tindakan. Umumnya digunakan untuk tugas berulang seperti menambah item baru, membuka menu, atau mengunduh dokumen.

Tautan (Link)

Button yang tampil menyerupai hyperlink, digunakan ketika tindakan mengarah ke halaman atau layar lain tanpa interaksi tambahan.

Penempatan

Hierarki membantu membedakan prioritas tindakan berdasarkan ukuran, warna, dan posisi button. Prioritaskan hanya satu tindakan utama (Primary Button) di setiap layar untuk menjaga fokus pengguna.