Button & Separator






Button & Separator – Teks Pengisi


1
Tentang Button (Tombol)

Button merupakan elemen interaktif yang memungkinkan pengguna melakukan tindakan tertentu dalam antarmuka digital. Setiap button dirancang untuk memberikan respons langsung ketika diklik atau disentuh.

Fungsi utama button mencakup navigasi antar halaman, pengiriman formulir, pembukaan modal dialog, dan eksekusi perintah khusus. Desain button yang efektif harus mempertimbangkan kontras warna, ukuran yang sesuai, dan penempatan yang strategis.

Terdapat berbagai jenis button seperti primary button untuk aksi utama, secondary button untuk aksi pendukung, dan ghost button untuk aksi tersier. Setiap jenis memiliki hierarki visual yang berbeda untuk membantu pengguna memahami prioritas tindakan.

Contoh Button:




2
Tentang Separator (Pemisah)

Separator adalah elemen visual yang berfungsi memisahkan konten atau bagian berbeda dalam sebuah layout. Penggunaan separator membantu menciptakan hierarki informasi yang jelas dan meningkatkan keterbacaan konten.

Jenis separator meliputi garis horizontal, garis vertikal, spasi kosong, dan elemen dekoratif lainnya. Pemilihan jenis separator harus disesuaikan dengan konteks dan tujuan pemisahan konten yang diinginkan.

Separator yang efektif tidak hanya berfungsi sebagai pembatas visual, tetapi juga membantu pengguna memahami struktur informasi dengan lebih baik. Ketebalan, warna, dan panjang separator harus dipilih dengan cermat untuk mencapai keseimbangan visual yang optimal.

Contoh Separator:

Garis Horizontal Tipis:


Garis Horizontal Tebal:


Separator dengan Teks:


ATAU


Separator Dekoratif:

3
Praktik Terbaik

✓ Button Guidelines


  • Gunakan label yang jelas dan deskriptif

  • Pastikan ukuran minimum 44px untuk touch target

  • Berikan feedback visual saat hover dan click

  • Konsisten dalam penggunaan warna dan style

✓ Separator Guidelines


  • Gunakan secukupnya, jangan berlebihan

  • Sesuaikan dengan hierarki konten

  • Pertimbangkan kontras dengan background

  • Gunakan spacing yang proporsional

Teks pengisi ini dibuat untuk keperluan desain dan layout. Konten dapat disesuaikan dengan kebutuhan proyek Anda.