Anatomi
Jenis dan variasi
Icon dan text label
Komponen Button dapat memiliki elemen icon dan/atau text label. Pada umumnya, Button selalu memiliki teks untuk mengkomunikasikan fungsi dari Button tersebut. Icon dapat digunakan untuk mempertegas fungsi dari komponen Button.
Dalam penggunaan tertentu, Button dapat hanya menggunakan icon tanpa text label. Pastikan icon yang digunakan dapat dipahami pengguna. Jika dibutuhkan, icon-only Button dapat dijelaskan dengan menggunakan tooltip.
Ultimate
Digunakan untuk aksi umum.
Primary
Digunakan untuk tindakan utama atau yang paling penting.
Secondary
Digunakan untuk tindakan sekunder atau opsional.
Quiet
Digunakan ketika konten tidak menjadi fokus utama di sebuah halaman, misalnya “Cek selengkapnya”.
Destructive
Digunakan untuk aksi yang bersifat destruktif, misalnya “Hapus” atau “Tolak”.
Inverse
Digunakan pada background berwarna gelap.
Floating
Digunakan sebagai navigasi yang aksesibel bagi pengguna, misalnya “Geser ke bawah” atau “Kembali ke atas”.
Behaviors
States
Button harus memberikan umpan balik visual ketika diklik dan merespons dengan cepat. Pastikan tombol memberikan respons yang jelas ketika pengguna mengkliknya, seperti perubahan warna atau animasi sederhana. Terdapat 5 states untuk Button, yakni Ultimate, Hover, Focused, Pressed, dan Disabled.
Flexible width
Lebar komponen biasanya menyesuaikan dengan teks label. Selain itu, Button bisa juga digunakan full-width untuk menyamai lebar layar terutama mobile.
Panduan penggunaan
Button adalah elemen interaktif yang memungkinkan pengguna melakukan aksi atau memulai proses di dalam aplikasi atau situs web.
Pastikan ukuran aksesibel
Pastikan tombol memiliki ukuran yang cukup untuk ditekan dengan mudah pada perangkat berbasis sentuh.
Gunakan icon sebaga info tambahan
Pertimbangkan penggunaan ikon bersama dengan teks untuk memberikan penekanan visual tambahan tentang aksi yang akan dilakukan tombol.
Hindari meletakkan Button dengan variasi yang sama bersebelahan
Ketikan menggunakan dua Button bersebelahan, pastikan menggunakan variasi yang berbeda agar pengguna memahami aksi mana yang lebih penting pada alur terkait.
Dihindari
Jangan menempatkan Button untuk dua tindakan penting bersebelahan.
Disarankan
Menggunakan kombinasi Button yang memiliki penekanan visual yang berbeda.
Peletakan Floating Button
Pada mobile, Floating Button diletakkan di bawah layar. Peletakan ini bertujuan agar Floating Button tetap aksesibel dan tidak mengganggu atensi pengguna.
Panduan penulisan
Tombol CTA atau call to action adalah tombol interaktif yang mendorong atau menginstruksikan pengguna untuk melakukan tindakan tertentu. Berikut panduan menulis untuk komponen ini.
Gunakan kata kerja spesifik
Sesuaikan kata kerja dengan tindakan yang akan diambil. Pastikan kata yang dipakai sesuai dengan konteks dan tujuan halaman atau tindakan yang akan diambil.
Singkat
Maksimal 2-3 kata dan fokus pada tindakan utama.
Gunakan sentence case
Hindari gunakan Title Case atau huruf kapital semua untuk menyorot tombol tertentu. Serta hindari tanda titik “.” di akhir kalimat.