Components

Badge

개수·필수 여부 등 짧은 수치 정보를 표시합니다.

3 필수 필수

코드 보기

<span class="tn-badge">3</span>
<span class="req">필수</span>  <!-- 채워지면 검정 반전 -->

Variants

이름	설명	미리보기
Count	빨간 원형 숫자 — 알림 개수	3
필수 배지	테두리형 → 채우면 검정 반전 (Form Field 연동)	필수 필수
99+	두 자리 초과는 99+	99+

Guidelines

✓ Do

숫자는 99+에서 자른다
필수 배지는 입력 완료 시 반드시 반전

✕ Don't

Chip 대용으로 쓰지 않는다 (Badge=수치, Chip=상태 텍스트)

Specification

속성	토큰/값	비고
`Count 배경`	`var(--err)`
`크기`	`17px / 999px`
`타이포`	`0.62rem / 700`

비교

Badge vs Chip — Badge는 수치·플래그(3, 필수), Chip은 상태 문구(운영 중).