Komponen Badge dan Tag

Lencana adalah label visual kecil dan ringkas yang menyampaikan status, jumlah, atau kategori secara sekilas. Tag biasanya merupakan label yang diterapkan pengguna untuk penyaringan dan pengelompokan, sedangkan lencana status menunjukkan keadaan seperti Aktif, Menunggu, atau Diarsipkan.

Dalam Tailwind, keduanya dibuat dengan struktur inti yang sama: sedikit padding, radius border rounded-full atau rounded-md, warna latar belakang, dan teks berukuran kecil. Seluruh komponen ini tidak memerlukan CSS khusus.

Lencana berbentuk pil menggunakan rounded-full untuk ujung yang sepenuhnya membulat, sehingga bentuknya khas dan menonjol dari konten persegi panjang. Pendekatan standar memadukan rona latar belakang terang dengan warna teks yang lebih gelap dari keluarga warna yang sama.

Misalnya, bg-green-100 text-green-800 membuat lencana hijau lembut yang tetap jelas pada ukuran kecil. Gunakan px-2.5 py-0.5 untuk padding ringkas dan text-xs font-medium untuk label yang mudah dibaca.

Untuk situasi yang memerlukan kontras lebih tinggi, lencana solid menggunakan latar belakang yang sangat pekat seperti bg-blue-600 dengan text-white. Lencana ini cocok digunakan pada latar belakang gelap atau saat perlu menonjol secara visual dibandingkan elemen lain.

Lencana solid umum digunakan untuk jumlah notifikasi, label versi (seperti Baru atau Beta), dan penanda kategori pada tanda fitur atau catatan perubahan.

Lencana jumlah notifikasi bertumpuk di atas tombol atau ikon untuk menampilkan item yang belum dibaca. Posisikan secara absolut relatif terhadap induknya dengan relative pada wadah dan absolute -top-1 -right-1 pada lencana.

Gunakan w-5 h-5 flex items-center justify-center untuk membuat lencana berbentuk lingkaran sempurna pada ukuran kecil. Sembunyikan lencana saat jumlahnya nol menggunakan rendering bersyarat atau utilitas hidden.

Lencana titik menyampaikan status tanpa teks — hanya berupa lingkaran kecil berwarna. Gabungkan w-2.5 h-2.5 rounded-full dengan warna latar belakang untuk membuat titik, lalu letakkan di samping teks menggunakan inline-flex items-center gap-1.5.

Indikator titik ideal untuk menunjukkan kehadiran online/offline, status sinkronisasi waktu nyata, atau lingkungan tempat suatu data berada (produksi atau penahapan).

Lencana garis luar menggunakan border, bukan isian latar belakang: border border-blue-500 text-blue-600 dengan latar belakang transparan atau sangat terang. Hasilnya adalah label halus yang tidak bersaing dengan elemen berisi di dekatnya.

Tambahkan bg-transparent (atau hilangkan kelas bg-) dan gunakan ring-1 ring-inset ring-blue-500 sebagai pendekatan alternatif yang memberi Anda lebih banyak kendali atas ketebalan ring.

Tag penyaring sering memerlukan tombol hapus (×) agar pengguna dapat menutupnya. Buat tag sebagai wadah inline-flex items-center gap-1 yang berisi label dan tombol ikon kecil.

Tombol hapus menggunakan ml-1 text-gray-500 hover:text-gray-900 dan simbol × kecil, sehingga mudah diklik tanpa terlalu menonjol secara visual. Pola ini umum digunakan pada penyaring pencarian, tag keahlian, dan input pilihan ganda.

Menambahkan ikon kecil sebelum label lencana memberikan konteks visual tanpa mengharuskan pengguna membaca teks. Gunakan inline-flex items-center gap-1 dan SVG berukuran w-3 h-3 agar ikon tetap proporsional dengan teks lencana.

Ikon tanda centang pada lencana hijau, jam pada lencana kuning, dan tanda X pada lencana merah menyampaikan status secara semantis melalui warna dan bentuk.

Tidak semua lencana memerlukan sudut yang sepenuhnya membulat. Tag persegi dengan rounded-md, bukan rounded-full, terlihat lebih terstruktur dan cocok untuk label teknologi, nomor versi, serta chip kategori.

Gaya ini sering muncul dalam alat pengembang, situs dokumentasi, dan catatan perubahan, karena bentuk perseginya menggemakan gaya blok kode dan label teknis.

Lencana tersedia dalam berbagai ukuran bergantung pada konteksnya. Di dalam baris tabel data, lencana ekstra kecil (text-xs) menjaga tampilan tetap ringkas. Di halaman pemasaran, pil yang lebih besar (text-sm px-4 py-1) lebih mudah dibaca sekilas.

Tentukan variasi ukuran dengan menyesuaikan nilai px-*, py-*, dan text-*. Hindari ukuran piksel absolut — gunakan skala Tailwind agar desain tetap konsisten.

Pola umum untuk menunjukkan konten waktu nyata atau siaran langsung adalah titik yang berdenyut. Gunakan animate-ping pada span yang diposisikan secara absolut di dalam wadah lencana untuk membuat efek riak yang menarik perhatian.

Letakkan titik statis di atas titik yang dianimasikan: span animate-ping membuat riak, sementara elemen saudara solid w-2 h-2 rounded-full bg-red-600 menjadi inti titik. Bungkus keduanya dalam wadah relative.

Dalam pelajaran ini, Anda mempelajari: bentuk lencana pil dan persegi yang dibuat dengan rounded-full dan rounded-md; kode warna status yang memadukan latar belakang terang (rona 100) dengan teks gelap (rona 800) dari warna yang sama; serta pola lencana khusus seperti jumlah notifikasi dengan pemosisian absolut, indikator titik, tombol hapus pada tag, dan animasi denyut siaran langsung menggunakan animate-ping. Selanjutnya, kita akan menggabungkan komponen dalam UI lengkap.