Badge
Badge digunakan untuk label kecil dengan berbagai variant warna dan ikon.
Badge digunakan untuk label kecil dengan berbagai variant warna dan ikon. Cocok untuk menandai status, versi, kategori, atau informasi singkat lainnya.
Sintaks
Gunakan :badge[label] dengan atribut opsional:
:badge[Stabil]:badge[Beta]{variant="warning"}:badge[New]{variant="success" icon="star"}:badge[Deprecated]{variant="danger"}Preview
Stabil
Beta
New
Deprecated
Varian
| Varian | Warna | Cocok untuk |
|---|---|---|
default |
Netral | Default / biasa |
new |
Aksen | Fitur baru |
warning |
Kuning | Peringatan |
success |
Hijau | Berhasil / stabil |
info |
Biru | Informasi |
danger |
Merah | Berbahaya / deprecated |
outline |
Transparan | Gaya ringan |
ghost |
Transparan | Sangat ringan |
Ikon
| Ikon | Data Attribute | Contoh |
|---|---|---|
| Bintang | icon="star" |
:badge[Populer]{icon="star"} |
| Centang | icon="check" |
:badge[Selesai]{icon="check"} |
Atribut
| Atribut | Wajib | Fungsi |
|---|---|---|
variant |
❌ | Menentukan warna badge (default: default) |
icon |
❌ | Menambahkan ikon di depan label |
class |
❌ | Menambahkan class CSS tambahan |
Catatan
- Label ditulis di dalam
[] - Badge bersifat inline, bisa diletakkan di dalam paragraf
- Varian menentukan warna dan gaya badge
- Ikon bersifat opsional dan akan muncul di sebelah kiri label
- Badge bisa dikombinasikan dengan komponen inline lain dalam satu paragraf