Lencana status
Untuk memakukan status sebuah baris jadi satu kata ketika tiap baris berbeda.
Pratinjau langsung
Sumber
<ul class="dc-badges">
<li><span class="dc-badge dc-badge--ok"><span class="dc-badge__dot" aria-hidden="true"></span>승인</span></li>
<li><span class="dc-badge dc-badge--warn"><span class="dc-badge__dot" aria-hidden="true"></span>검토 중</span></li>
<li><span class="dc-badge dc-badge--danger"><span class="dc-badge__dot" aria-hidden="true"></span>반려</span></li>
<li><span class="dc-badge dc-badge--info"><span class="dc-badge__dot" aria-hidden="true"></span>접수</span></li>
<li><span class="dc-badge"><span class="dc-badge__dot" aria-hidden="true"></span>임시저장</span></li>
</ul>.dc-badges {
display: flex; flex-wrap: wrap; gap: var(--dc-2);
margin: 0; padding: 0; list-style: none;
font-family: var(--dc-font);
}
.dc-badge {
display: inline-flex; align-items: center; gap: var(--dc-1);
min-height: 24px; padding: 0 var(--dc-2);
border: 1px solid var(--dc-line);
border-radius: var(--dc-r-full);
background: var(--dc-sunken);
color: var(--dc-text-sub);
font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.dc-badge__dot {
width: 6px; height: 6px; border-radius: var(--dc-r-full);
background: currentColor;
}
.dc-badge--ok {
background: var(--dc-ok-soft); color: var(--dc-ok);
border-color: color-mix(in srgb, var(--dc-ok) 30%, transparent);
}
.dc-badge--warn {
background: var(--dc-warn-soft); color: var(--dc-warn);
border-color: color-mix(in srgb, var(--dc-warn) 30%, transparent);
}
.dc-badge--danger {
background: var(--dc-danger-soft); color: var(--dc-danger);
border-color: color-mix(in srgb, var(--dc-danger) 30%, transparent);
}
.dc-badge--info {
background: var(--dc-info-soft); color: var(--dc-info);
border-color: color-mix(in srgb, var(--dc-info) 30%, transparent);
}
.dc-badge--outline {
background: transparent; border-color: var(--dc-line-bold); color: var(--dc-text);
}
.dc-badge--outline.dc-badge--ok { border-color: var(--dc-ok); color: var(--dc-ok); }
.dc-badge--outline.dc-badge--danger { border-color: var(--dc-danger); color: var(--dc-danger); }
.dc-badge-host {
display: inline-flex; align-items: center; gap: var(--dc-2);
min-height: 44px; padding: 0 var(--dc-4);
border: 1px solid var(--dc-line-bold); border-radius: var(--dc-r-sm);
background: var(--dc-surface); color: var(--dc-text);
font-family: var(--dc-font); font-size: 14px; font-weight: 700;
cursor: pointer;
}
.dc-badge--count {
min-width: 20px; min-height: 20px; padding: 0 6px;
justify-content: center;
background: var(--dc-brand); border-color: transparent;
color: var(--dc-text-on);
font-variant-numeric: tabular-nums;
}Cara memakainya
- Jangan menyampaikan makna hanya dengan warna — katanya selalu ikut
- Batasi nama status di bawah lima dan jangan campur istilah dalam satu layar
- Lencana untuk dibaca, bukan ditekan; kalau harus ditekan, itu tag atau tombol
Hal yang perlu diwaspadai
- Pakai latar -soft dengan warna teks penuh; dua warna pudar bertumpuk jatuh di bawah 4.5:1
- Batasi hitungan di 99+ dan sebut yang dihitung lewat dc-sr