Lencana

Penanda status ringkas. Delapan varian, sama dengan komponen aslinya. Tinggi 20px, ikon 12px.

Semua varian

Varian success, warning, dan info memakai latar lembut + garis tepi supaya tetap terbaca di mode gelap.

Default Secondary Outline Muted Info Lulus Menunggu Gagal

Lihat kode

<div class="ck-row ck-row-3 ck-wrap">
  <span class="ck-badge ck-badge--default">Default</span>
  <span class="ck-badge ck-badge--secondary">Secondary</span>
  <span class="ck-badge ck-badge--outline">Outline</span>
  <span class="ck-badge ck-badge--muted">Muted</span>
  <span class="ck-badge ck-badge--info">Info</span>
  <span class="ck-badge ck-badge--success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M20 6 9 17l-5-5"/></svg> Lulus</span>
  <span class="ck-badge ck-badge--warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg> Menunggu</span>
  <span class="ck-badge ck-badge--destructive">Gagal</span>
</div>

Titik status

Untuk daftar yang butuh penanda lebih kecil dari lencana.

Aktif Menunggu verifikasi Ditangguhkan Arsip

Lihat kode

<div class="ck-stack ck-stack-2">
  <span class="ck-row ck-row-2 ck-text"><span class="ck-dot ck-dot--success"></span> Aktif</span>
  <span class="ck-row ck-row-2 ck-text"><span class="ck-dot ck-dot--warning"></span> Menunggu verifikasi</span>
  <span class="ck-row ck-row-2 ck-text"><span class="ck-dot ck-dot--destructive"></span> Ditangguhkan</span>
  <span class="ck-row ck-row-2 ck-text"><span class="ck-dot"></span> Arsip</span>
</div>