DraftAktifMenunggu pembayaran
Badge
Label ringkas untuk status, kategori, atau jumlah. Membantu pembaca mengenali informasi sekilas.
Dasar
Tanpa prop, badge memakai warna neutral dan variant soft. Selalu tulis label yang menjelaskan statusnya.
Warna dan variant
Lima warna semantik yang sama dengan Button dan Alert. Gunakan soft untuk kebutuhan umum, outline untuk label berbingkai, dan solid untuk penekanan.
soft
primaryneutralsuccesswarningdanger
outline
primaryneutralsuccesswarningdanger
solid
primaryneutralsuccesswarningdanger
Ukuran dan bentuk
Ukuran sm, md, dan lg memiliki tinggi minimum 20, 24, dan 28 px. Bentuk default pill; rounded=false memakai radius kontrol standar.
KecilSedangBesarSudut standar
Ikon dan titik status
Tambahkan ikon Iconify (Lucide, Tabler, MDI, dan lainnya) atau dot sebagai penanda tambahan. Jika keduanya diberikan, ikon yang ditampilkan.
TerverifikasiDalam perjalananPerlu ditinjau
Label panjang
Label dapat membungkus ke baris berikutnya tanpa dipotong. Tetap utamakan teks singkat, terutama di tabel atau layar kecil.
Menunggu konfirmasi jadwal pengangkutan berikutnya
API
Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| color | 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'neutral' | Makna status atau kategori. |
| variant | 'soft' | 'outline' | 'solid' | 'soft' | Tingkat penekanan label. |
| size | 'sm' | 'md' | 'lg' | 'md' | Ukuran teks, ikon, dan ruang label. |
| icon | string | — | Nama ikon Iconify; menggantikan dot bila keduanya diisi. |
| dot | boolean | false | Titik dekoratif sebelum teks. |
| rounded | boolean | true | Bentuk pill. false memakai radius kontrol standar. |
Slots
| Slot | Tipe | Default | Keterangan |
|---|---|---|---|
| default | — | — | Teks label. Wajib menyertakan makna status, bukan hanya ikon atau warna. |
Tidak ada event khusus. Atribut HTML dan class tata letak diteruskan ke elemen pembungkus.