Tag
Import
<link rel="stylesheet" href="/guide/css/base/index.css" /> <link rel="stylesheet" href="/guide/css/components/tag.css" />
Live
× 버튼을 클릭해 태그를 제거해 보세요.
디자인
개발
긴급
검토중
미선택
필터 없음
Variants
Primary
카테고리
카테고리
Secondary
카테고리
카테고리
Error
카테고리
카테고리
Warning
카테고리
카테고리
Outline
카테고리
카테고리
States
Default
카테고리
With Close
카테고리
Outline
카테고리
Disabled
카테고리
필터 UI 예시
outline → primary 전환 패턴 — 검색 필터에서 선택/해제 시 사용
디자인
UI/UX
개발
마케팅
기획
Specs
| 속성 | 값 | Badge와 차이 |
|---|---|---|
| Height | 28px | 동일 |
| Padding | 4px 10px (닫기 버튼 있을 때 우측 6px) | Badge는 4px 8px |
| Border Radius | full (9999px) | 동일 |
| Font | 14px · Pretendard Regular | 동일 |
| 색상 방식 | Tonal — 연한 배경 + 진한 텍스트 | Badge는 solid (진한 배경 + 흰 텍스트) |
| Close 버튼 | 16×16px · opacity 0.55 → hover 1.0 | Badge에 없음 |
Code
<!-- 기본 --> <div class="tag tag--primary">카테고리</div> <!-- 닫기 버튼 포함 --> <div class="tag tag--primary"> 카테고리 <button class="tag__close" aria-label="카테고리 필터 제거">×</button> </div> <!-- 미선택 (outline) --> <div class="tag tag--outline">카테고리</div> <!-- 비활성 --> <div class="tag tag--primary tag--disabled">카테고리</div>
Classes
| 클래스 | 타입 | 설명 |
|---|---|---|
| .tag | 루트 | 태그 래퍼 — height 28px · border-radius full · tonal 색상 |
| .tag--primary | 수정자 | green tonal — 선택된 기본 필터 |
| .tag--secondary | 수정자 | blue tonal |
| .tag--error | 수정자 | red tonal |
| .tag--warning | 수정자 | yellow tonal |
| .tag--outline | 수정자 | 흰 배경 + 테두리 — 미선택 필터 |
| .tag--disabled | 수정자 | 비활성 — opacity 0.45 · pointer-events none |
| .tag__close | 요소 | × 닫기 버튼 — 16×16px · button 요소 사용 |