Generator Badge

Buat komponen badge dan pill CSS online dengan generator badge gratis kami. Pilih dari 12 preset atau sesuaikan setiap detail - teks, ukuran (XS hingga XL), varian (terisi, bergaris, halus, ghost), bentuk (membulat, pill, persegi), dan warna. Tambahkan titik indikator status, tombol tutup, dan efek hover interaktif. Pratinjau real-time dan salin HTML + CSS dengan satu klik - tanpa pendaftaran.

Live Preview

Badge

Presets

Badge Settings

Badge Text

Size

Variant

Shape

Main Color

Text Color

Dot Indicator

Show status dot

Close Button

Show remove button

Interactive

Hover & click effects

CSS Class Name

Generated Code

HTML

<span class="custom-badge">Badge</span>

CSS

.custom-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: 9999px;
  background: #6366F1;
  color: #FFFFFF;
  border: none;
  white-space: nowrap;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

Full Code (HTML + CSS)

Mengapa Menggunakan Generator Badge Kami?

Pembuatan Badge Instan: buat badge dan komponen pill CSS secara instan dengan generator badge kami. Sesuaikan teks, ukuran, warna, varian, dan bentuk secara real-time - pratinjau diperbarui segera saat Anda mengubah pengaturan apa pun. Tanpa perjalanan bolak-balik ke server, tanpa menunggu.
Privat - Tanpa Unggah ke Server: generator badge berjalan sepenuhnya di browser Anda. Semua konfigurasi badge, pilihan warna, dan kode yang dihasilkan tetap di perangkat Anda - tidak ada yang diunggah ke server mana pun.
12 Preset Warna & Warna Khusus: pilih dari 12 preset bawaan yang mencakup tipe badge umum: Primary, Success, Warning, Error, Info, Neutral, Halus, Bergaris, Interaktif, dan preset ukuran. Setiap preset menerapkan konfigurasi lengkap - warna, varian, ukuran, dan opsi - atau sesuaikan setiap detail secara manual.
Salin HTML + CSS dengan Satu Klik: salin cuplikan HTML, gaya CSS, atau keduanya bersama-sama dengan satu klik. Generator badge menghasilkan kode siap produksi dengan nama kelas yang bersih, tata letak inline-flex yang tepat, serta status hover/interaktif yang lengkap.

Kasus Penggunaan Umum Generator Badge

Badge Status untuk Komponen UI: pengembang React dan Vue menggunakan generator badge untuk membuat indikator status bagi tabel data, kartu dashboard, dan item daftar. Badge yang dihasilkan bekerja langsung dengan framework komponen - tempel CSS ke stylesheet Anda dan gunakan HTML sebagai templat komponen untuk status pesanan, peran pengguna, dan peringatan sistem.
Label Produk E-Commerce: toko online menggunakan generator badge untuk membuat label produk seperti "Diskon", "Baru", "Terlaris", dan "Edisi Terbatas". Gunakan preset pill interaktif dengan warna merek Anda agar badge produk menarik perhatian tanpa menutupi gambar produk. Varian bergaris cocok untuk pelabelan yang halus.
Badge Notifikasi Aplikasi Seluler: desainer UI seluler menggunakan generator badge untuk membuat prototipe penghitung notifikasi, indikator belum dibaca, dan titik status untuk antarmuka aplikasi seluler. Ukuran XS dan SM dengan bentuk pill menghasilkan tampilan badge notifikasi yang familiar dan berfungsi pada elemen navigasi iOS dan Android.
Label dan Tag Konten CMS: pembuat situs WordPress dan CMS menggunakan generator badge untuk membuat tag kategori, label postingan, dan indikator jenis konten. Varian halus sempurna untuk metadata postingan blog - memberikan pembeda visual tanpa bobot badge terisi, menjaga fokus pada konten.
Badge Token Design System: pengelola design system menggunakan generator badge untuk membuat komponen badge yang konsisten dengan warna token desain. CSS yang dihasilkan menggunakan nama kelas dan nilai warna yang dapat disesuaikan yang dapat dipetakan ke properti kustom CSS, memudahkan theming badge di mode terang dan gelap.
Tag Peran dan Izin Pengguna: aplikasi SaaS menggunakan generator badge untuk membuat badge peran pengguna - Admin, Moderator, Editor, Pelanggan - dengan warna berbeda untuk setiap peran. Opsi titik indikator menambahkan isyarat status visual, dan opsi tombol tutup memungkinkan antarmuka bergaya tag yang dapat dihapus untuk chip filter dan daftar pilihan.

Apa Itu Komponen Badge CSS?

Badge (juga disebut pill, tag, chip, atau label) adalah elemen UI inline kecil yang digunakan untuk memberi label, mengategorikan, atau menyorot konten. Badge biasanya ringkas, memiliki warna latar belakang yang khas, dan menggunakan sudut membulat atau bentuk pill agar menonjol dari konten di sekitarnya. Contoh umum termasuk penghitung notifikasi ("3"), indikator status ("Aktif", "Tertunda"), label konten ("Baru", "Diskon"), dan tag peran pengguna ("Admin"). Generator badge kami menghasilkan HTML dan CSS siap produksi untuk komponen badge yang dapat digunakan langsung di proyek web apa pun.

Cara Kerja Generator Badge Kami

Pilih Preset atau Mulai Menyesuaikan: pilih dari 12 preset yang mencakup tipe badge umum - warna status (success, warning, error, info), varian visual (terisi, bergaris, halus, ghost), ukuran (XS hingga XL), dan fitur khusus (titik indikator, tombol tutup, efek hover interaktif). Setiap preset menetapkan beberapa properti sekaligus untuk iterasi cepat.
Sesuaikan Setiap Detail: sesuaikan teks badge, ukuran, varian, bentuk (membulat, pill, atau persegi), warna utama, dan warna teks. Aktifkan atau nonaktifkan fitur opsional seperti titik indikator status, tombol tutup/hapus dengan efek hover, atau status hover dan klik interaktif. Pratinjau langsung diperbarui secara real-time saat Anda menyesuaikan pengaturan apa pun.
Salin Kode yang Dihasilkan: generator badge menyediakan keluaran HTML dan CSS yang bersih dan siap produksi. Salin cuplikan HTML, gaya CSS, atau keduanya bersama-sama. CSS mencakup tata letak inline-flex yang tepat, ukuran font, padding, border-radius, dan status hover. Gunakan nama kelas khusus untuk mengintegrasikan dengan design system Anda yang ada.

Penjelasan Varian Badge

Terisi: latar belakang solid dengan teks kontras. Varian badge yang paling menonjol secara visual. Gunakan untuk aksi utama, indikator status, dan penghitung notifikasi di mana badge perlu langsung menonjol dari konten di sekitarnya.
Bergaris: latar transparan dengan batas berwarna. Warna batas sesuai dengan warna utama, dan teks menggunakan warna yang sama. Sempurna untuk informasi sekunder di mana Anda ingin label terlihat tanpa bersaing dengan konten utama.
Halus: latar belakang bernuansa terang dengan teks berwarna. Menggunakan warna utama sebagai nuansa latar belakang terang (warna yang Anda berikan digunakan sebagai latar belakang) dengan teks lebih gelap. Ideal untuk tag kategori, label metadata, dan badge token design system di mana badge harus terlihat tetapi tidak dominan.
Ghost: tanpa latar belakang, hanya teks berwarna. Varian yang paling tidak menonjol secara visual. Gunakan untuk label inline, tag sekunder di antarmuka padat, dan situasi di mana Anda ingin menunjukkan kategori tanpa menambah bobot visual.

Pertimbangan Aksesibilitas Badge

Saat menggunakan badge di UI Anda, pertimbangkan praktik terbaik aksesibilitas berikut: pastikan kontras warna yang cukup antara latar belakang badge dan teks (WCAG AA memerlukan rasio 4,5:1 untuk teks normal); gunakan varian halus dengan hati-hati karena latar terang mungkin tidak memberikan kontras yang cukup di semua layar; berikan aria-label untuk tombol tutup guna membantu pengguna pembaca layar (HTML yang kami hasilkan menyertakan aria-label="Remove"); hindari mengandalkan warna saja untuk menyampaikan makna - kombinasikan badge status dengan label teks untuk pengguna dengan defisiensi penglihatan warna; dan pastikan badge interaktif memiliki indikator fokus yang terlihat untuk navigasi keyboard.

Pertanyaan yang Sering Diajukan

Generator badge membuat komponen CSS badge/pill - elemen UI inline kecil yang digunakan untuk label, tag, indikator status, dan penghitung notifikasi. Konfigurasikan teks, ukuran, varian, bentuk, warna, dan fitur seperti titik indikator dan tombol tutup.

Generator badge mendukung lima ukuran: XS (penghitung notifikasi ringkas), SM (label halus), MD (badge standar), LG (label menonjol), dan XL (badge besar).

Terisi memiliki latar belakang solid. Bergaris memiliki latar transparan dengan batas berwarna. Halus menggunakan latar belakang bernuansa terang dengan teks berwarna. Ghost tidak memiliki latar belakang - hanya teks berwarna. Pilih sesuai seberapa besar penekanan yang dibutuhkan.

Ya - 100% gratis tanpa pendaftaran, tanpa akun, dan tanpa batas penggunaan.

Salin cuplikan HTML dan letakkan di tempat Anda ingin badge muncul. Salin CSS dan tempel ke stylesheet Anda. CSS-nya mandiri tanpa dependensi eksternal.

Ya. CSS yang dihasilkan menggunakan nilai warna hex yang dapat Anda ubah di stylesheet. Untuk theming, ganti dengan properti kustom CSS.

Menambahkan lingkaran kecil sebelum teks menggunakan pseudo-elemen CSS ::before. Umum digunakan untuk indikator status tanpa HTML tambahan.

Menambahkan cursor: pointer, efek hover yang mengangkat badge, dan transisi CSS yang halus. Ideal untuk chip filter yang dapat diklik dan badge yang dapat ditutup.

Membulat (border-radius 6px), Pill (9999px - bentuk oval), dan Persegi (border-radius 3px). Pill adalah bentuk badge paling umum di framework UI modern.