Chip

Chip menampilkan informasi singkat, pilihan, atau filter dalam bentuk elemen kecil yang mudah dikenali. Komponen ini membantu menjaga tampilan antarmuka tetap ringkas dan efisien tanpa mengurangi konteks interaksi.

Penggunaan

Gunakan Chip untuk menampilkan informasi, membuat pilihan, menyaring konten, atau memicu tindakan tertentu. Komponen ini membantu pengguna berinteraksi dengan cepat melalui elemen visual yang mudah dipahami dan diklik.

Kategori

Terdapat dua kategori Chip, yaitu filled dan outline.

Ukuran

Terdapat dua ukuran: Medium (36px) dan Kecil (24px).

Masing-masing ukuran digunakan untuk konteks serta kebutuhan interaksi yang berbeda.

State (keadaan)

Default

Menunjukkan bahwa opsi belum dipilih. Chip dapat diklik untuk memilih opsi ini.

Hover

Menunjukkan keadaan saat kursor diarahkan ke area chip.

Selected

Menunjukkan chip dalam keadaan terpilih. Pada state ini, biasanya terjadi perubahan pada warna teks, border, dan/atau latar belakang chip.

Disabled

Menunjukkan chip tidak dapat dipilih atau diinteraksikan.

Cara Penggunaan yang Disarankan

Penempatan (Placement)

•Atur chip dalam baris yang bisa digulir secara horizontal untuk menghemat ruang.
•Pastikan chip selalu tampil sebagai bagian dari satu set dan tidak muncul sendirian.
•Optimalkan urutan dengan menempatkan chip paling relevan atau paling sering dipilih di posisi awal.

✅ Disarankan

Gunakan teks yang singkat dan padat, umumnya berupa kata benda atau kategori.

❌ Dihindari

Jangan menggunakan teks yang terlalu panjang atau bertele-tele.

✅ Disarankan

Gunakan huruf kapital di awal kata untuk menjaga keterbacaan dan konsistensi tampilan.

❌ Dihindari

Hindari penggunaan huruf kapital seluruhnya yang dapat mengurangi keterbacaan.

✅ Disarankan

Disarankan Tambahkan ikon di sisi kiri atau kanan teks bila relevan, dan pastikan ikon tersebut sesuai dengan konteks chip.

❌ Dihindari

Jangan menambahkan ikon yang tidak relevan atau hanya untuk dekorasi tanpa makna fungsional.

Penerapan

Chip Pilihan (Choice Chip)

Gunakan Chip Pilihan untuk memungkinkan pengguna memilih satu opsi dari beberapa pilihan.

Pastikan satu chip dipilih secara default, mirip dengan tombol radio. Default ini sebaiknya mewakili opsi yang paling umum atau paling sering dipilih.

Ketika pengguna memilih chip baru, chip sebelumnya akan otomatis tidak dipilih, memastikan hanya satu chip aktif dalam satu waktu.

Chip Filter (Filter Chip)

Gunakan Chip Filter untuk memungkinkan pengguna menerapkan lebih dari satu filter.

Secara default, chip tidak dipilih. Pengguna dapat mengetuk atau mengklik chip untuk memilih beberapa opsi, lalu menekan tombol hapus untuk membatalkan pilihan.

Komponen ini ideal untuk pencarian dengan banyak kriteria, seperti jenis kelamin, kategori, atau durasi waktu.

Spesifikasi