---
{"id":"tag","title":"태그·배지","category":"컴포넌트","order":50,"summary":"분류·선택된 필터·간단한 상태 표시의 사용·상태·접근성 계약.","status":"문서 기준 · UI 미검증","references":["components/tag/usage"]}
---

# 태그·배지

## 목적과 사용

분류·선택된 필터·간단한 상태 표시에 사용합니다. 페이지 이동 버튼이나 여러 기능을 가진 작은 컨트롤로 사용하지 않습니다.

## 구성과 변형

짧은 이름, 의미 상태, 선택적 선택/제거. 변형의 외형은 각 제품의 기존 [토큰](tokens.md)을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.

## 동작 규칙

- TAG-01 MUST: 읽기 전용·선택형·제거형을 구분합니다.
- TAG-02 MUST: 제거 동작은 무엇을 제거하는지 이름에 포함합니다.
- TAG-03 MUST: 의미를 색만으로 구분하지 않습니다.
- TAG-04 SHOULD: 많은 태그는 일부+추가 열람으로 제공하되 누락을 알립니다.

## 접근성

비동작 배지를 button으로 만들지 않습니다. 제거 버튼의 대상과 선택 상태를 낭독 가능하게 합니다. 공통 [접근성 기준](accessibility.md)도 함께 적용합니다.

## 콘텐츠 예시

좋음: ‘필터: 실행 중 ×’ / 피함: 회색·초록 색상만의 무명 태그.

## 우리 구현과 연결

서버 상태와 필터 태그를 같은 동작으로 취급하지 않습니다.

제품별 소유 경로는 [WICKEDVPS](product-vps.md), [Panel](product-panel.md), [Blesta](product-blesta.md)와 [소스 근거](source-evidence.md)를 확인합니다. 코드 존재와 모든 사용처의 준수는 다르며, 별도 표시가 없는 제품별 준수 상태는 미검증입니다.

## 상태와 검증

긴 라벨·여러 태그·제거 후 focus·색상 구분을 확인합니다.

일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. [검증 체크리스트](testing.md)에 증거를 연결합니다.