Labels/Lozenge (AppLozenge)
Lozenge (AppLozenge)
● Ready Web Nuxt 4 + Mobile React Native
Lencana status visual khas Atlassian untuk menandai status pengerjaan soal (Selesai, Dalam Proses, Baru, Kadaluwarsa) dalam format subtle dan bold.
<AppLozenge appearance="success">LULUS</AppLozenge>
Subtle vs. Bold
Gunakan gaya subtle (default) untuk status yang tampil berdampingan dengan banyak lozenge lain, seperti daftar tabel — warnanya lembut agar tidak saling bersaing menarik perhatian. Naikkan ke bold (is-bold) hanya untuk satu status yang paling ingin ditonjolkan di satu tampilan (misalnya hasil akhir "LULUS" di kartu ringkasan), bukan dipakai merata ke semua lozenge di halaman yang sama.
Lozenge Variations (Subtle vs Bold)
Subtle Lozenges:
DRAFTLULUSSEDANG BERJALANPAKET BARURAGU-RAGUTIDAK MEMENUHI
Bold Lozenges:
DRAFTLULUSSEDANG BERJALANPAKET BARURAGU-RAGUTIDAK MEMENUHI
Props & API Reference
3 properties| Property | Type | Default | Deskripsi |
|---|---|---|---|
| appearance | 'default' | 'success' | 'removed' | 'inprogress' | 'moved' | 'new' | 'default' | Palet warna sesuai makna status yang diwakili. |
| isBold | boolean | false | Beralih dari gaya subtle (latar lembut) ke bold (latar solid, teks putih). |
| maxWidth | string | — | Batas lebar CSS opsional; teks yang melebihi akan dipotong dengan ellipsis (truncate). |
Slots API
1 slots| Slot Name | Scoped Props | Deskripsi |
|---|---|---|
| #default | — | Label teks pendek, sebaiknya satu-dua kata dalam UPPERCASE. |