Badge

Badge digunakan untuk menandai status, kategori, atau kondisi tertentu dari sebuah elemen dalam antarmuka. Komponen ini berfungsi sebagai label visual yang ringkas untuk membantu pengguna mengenali informasi dengan cepat.

Penggunaan

Gunakan Badge untuk menandai status, kategori, atau kondisi tertentu dari sebuah elemen di antarmuka. Komponen ini berfungsi sebagai label visual ringkas yang membantu pengguna mengenali informasi dengan cepat.

Kategori

Brand Color

Menampilkan informasi produk tertentu atau status yang terkait dengan identitas merek.

Info

Menyampaikan informasi tambahan atau atribut penting pada elemen.

Success

Menunjukkan status positif atau proses yang berhasil diselesaikan.

Warning

Memberikan peringatan terhadap kondisi atau informasi yang perlu diperhatikan pengguna.

Error

Menandakan masalah atau kesalahan yang membutuhkan perhatian atau tindakan segera.

Neutral/General

Menunjukkan status umum atau informasi yang tidak bersifat kritis.

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan teks yang singkat (1–2 kata) agar mudah dibaca dan tidak mengganggu tata letak.

❌ Dihindari

Hindari teks panjang yang memengaruhi proporsi atau keterbacaan.

✅ Disarankan

Tempatkan badge dekat dengan konteks utama seperti nama pengguna, item daftar, atau tombol aksi.

❌ Dihindari

Hindari penggunaan badge untuk tindakan interaktif seperti tombol.

Penerapan

Survei dan Kuis

Gunakan badge untuk menandai status dari setiap survei atau kuis yang tersedia bagi pengguna.

Badge membantu pengguna mengenali progres atau kondisi survei secara cepat, seperti “Belum diisi” untuk survei yang belum dikerjakan dan “Selesai” untuk survei yang telah dikirimkan.

Spesifikasi