Tag

한눈에#

적용된 필터·선택 항목처럼 사용자가 다루는 값을 표시하는 칩입니다 — onRemove를 주면 제거 가능한 입력성 칩이 됩니다.

사용 시점#

사용자가 다루는 값(필터·선택 항목)을 라벨로 보여주면 Tag — 상호작용 칩이나 읽기 전용 표식은 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

해부#

알약 위에 토큰 실측을 핀으로 얹습니다 — 값이 바뀌면 핀도 함께 움직입니다(드리프트 0).

알약은 radius.full로 콘텐츠 높이에 맞춰 둥글어집니다 — 명시 높이 토큰 없이 패딩과 폰트가 높이를 결정합니다. 제거 버튼은 버튼 박스 20px(icon.size-md, 글리프 16px)이고 히트 영역은 ::after로 44px까지 확장됩니다.

변형#

5단 의미 색. 색은 이름이 아니라 실제 스와치와 측정된 대비로 확인하세요 — 상태색은 base 색의 8% color-mix 틴트 위에 *-text 잉크로 AA 4.5:1을 보장합니다.

틴트는 8% 고정입니다 — 12%는 success-text와 4.39:1로 AA 미달(선례 실측). 대비 배지는 라이트 테마 기준이며, 다크 테마에서도 다섯 변형 모두 AA(4.5:1 이상)를 보장합니다.

크기#

size로 2단 — sm(caption 폰트)·md(body-2 폰트). 두 크기 모두 알약 형태와 제거 버튼 히트 영역을 공유하고, 인라인 패딩만 달라집니다.

상태#

onRemove를 제공하면 제거 버튼(CloseIcon)이 렌더됩니다. 함수 prop은 서버 MDX로 전달할 수 없어 코드로 보입니다:

'use client';

function FilterTags({ filters, onRemove }: FilterTagsProps) {
  return filters.map((filter) => (
    <Tag key={filter} variant="primary" onRemove={() => onRemove(filter)}>
      {filter}
    </Tag>
  ));
}

• 제거 버튼은 기본 70% 투명도, hover 시 100% — 라벨보다 조용하게 유지됩니다
• 긴 라벨은 말줄임(ellipsis) 처리됩니다 (max-width: 100%)

Props#

접근성#

• 제거 버튼은 네이티브 <button> + aria-label(기본 ‘제거’) — 라벨이 여러 개일 때는 removeLabel="React 태그 제거"처럼 대상을 명시하세요
• 제거 버튼은 시각은 작지만 ::after로 히트 영역이 44px까지 확장됩니다(버튼 박스 20px → 44px)
• :focus-visible 2px focus-ring 링, 아이콘은 장식(aria-hidden 처리된 CloseIcon)
• 잉크는 *-text 토큰 — AA 대비 빌드 게이트 보장

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).