배지 · 품질 판정 배지
짧은 상태·분류를 표시할 때. 제니트리는 일반 상태와 품질 판정을 의미상 분리합니다.
코드
<!-- 일반 상태 -->
<span class="jt-badge jt-badge-info">정보</span>
<span class="jt-badge jt-badge-success">완료</span>
<span class="jt-badge jt-badge-warning">주의</span>
<span class="jt-badge jt-badge-error">오류</span>
<!-- 품질 판정 — 시험·규격 판정에는 이쪽 -->
<span class="jt-badge jt-badge-pass">적합</span>
<span class="jt-badge jt-badge-fail">부적합</span>
<span class="jt-badge jt-badge-hold">시험중</span>
<span class="jt-badge jt-badge-oos">관리한계</span>하지 말 것
- 색만으로 판정을 전달하지 마세요. 색각 이상 사용자와 흑백으로 인쇄되는 COA·시험성적서에서 정보가 통째로 사라집니다. 이것은 권고가 아니라 규칙입니다.
- ‘저장 성공’과 ‘시험 적합’에 같은 배지를 쓰지 마세요. 나중에 판정색만 바꿔야 할 때 서로를 건드리게 됩니다.
접근성
- 배지는
white-space:nowrap으로 고정돼 있습니다 — 좁은 화면에서 ‘부적/합’으로 잘리지 않습니다 - 배지 안 글자가 곧 정보입니다. 아이콘만 넣지 마세요
앱에서 모양 바꾸기
jt-utilities.css를 고치지 말고 아래 변수만 덮어쓰세요(컴포넌트 계약).
노브: --jt-badge-h
.my-page .jt-badge { --jt-badge-h: …; }