Badge

Penggunaan

<SBadge label="Primary" color="primary" />
<SBadge label="Solid" color="primary" variant="solid" />
<SBadge label="Outline" color="danger" variant="outline" />
<SBadge label="Subtle" color="primary" variant="subtle" />

Ikon

icon dan trailingIcon menambahkan ikon sebelum atau setelah label - berguna untuk status glyph atau disclosure chevron. Badge murni elemen tampilan, meskipun begitu - untuk tag yang dapat ditutup, lihat Chip sebagai gantinya. Slot icon/trailing-icon yang cocok menggantikan glyph sepenuhnya ketika nama ikon saja tidak cukup (spinner, misalnya).

<SBadge label="Verified" icon="hugeicons:tick-02" color="success" />
<SBadge label="New" trailing-icon="hugeicons:arrow-right-01" color="primary" />

Ikon saja

icon tanpa label (dan tanpa konten slot default) menghilangkan bentuk pil untuk menjadi lingkaran sebagai gantinya - ini terbaca sebagai indikator status/count yang berdekatan dengan avatar daripada label teks. Chip tetap pil bahkan ikon-saja; ini adalah bentuk yang sengaja berbeda untuk peran yang berbeda.

<SBadge icon="hugeicons:notification-01" color="primary" />
<SBadge icon="hugeicons:tick-02" color="success" size="lg" />
<SBadge icon="hugeicons:notification-01" color="primary" variant="solid" />
<SBadge icon="hugeicons:tick-02" color="success" variant="solid" size="lg" />

Lencana hitungan numerik

Label numerik otomatis memiliki lebar minimum yang sama dengan tinggi lencana, sehingga hitungan satu digit berbentuk persegi sementara nilai yang lebih panjang melebar mengikuti kontennya. Radius sudut tetap menggunakan nilai default. Gunakan rounded untuk membulatkan penuh hitungan atau label teks seperti Baru.

<SBadge label="1" size="sm" color="primary" />
<SBadge label="12" color="primary" />
<SBadge label="100" color="primary" />
<SBadge rounded label="Baru" color="danger" />

Status dot

dot menambahkan lingkaran solid berwarna kecil - indikator online/offline/away klasik. Dikasangkan dengan label, ia duduk di depan teks; sendirian, seluruh badge menciut menjadi hanya dot. Dots inline menggunakan warna badge foreground sehingga tetap terlihat di pil solid; standalone dots menggunakan warna teks role terlepas dari variant untuk kontras terhadap permukaan default. Dots inline bersifat dekoratif. Dot standalone memiliki peran gambar dan membutuhkan nama yang dapat diakses seperti aria-label.

<SBadge label="Online" dot color="success" />
<SBadge label="Away" dot color="warning" />
<SBadge label="Offline" dot color="neutral" />

<!-- Bare dot, no visible label - give it an accessible name directly -->
<SBadge dot color="success" aria-label="Online" />

Dalam markdown

Setiap komponen Selaras sudah terdaftar secara global di bawah nama berawalan S - blok ::s-badge{...} berfungsi tanpa wiring tambahan, props ikut disertakan (lihat bagian "In markdown" di Callout untuk cara kerja pola secara umum):

::s-badge{label="New" color="primary"}
::

Custom :ui

Untuk melihat dengan tepat apa yang akan Anda timpa - kelas default untuk setiap slot dan varian - berikut adalah file tema Badge sendiri:

Props

Slots