Tag

한눈에#

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

사용 시점#

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

플레이그라운드#

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

import { Tag } from '@wds/ui-web';

<Tag>태그</Tag>

변형#

크기#

상태#

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 태그 제거"처럼 대상을 명시하세요
• 제거 버튼은 시각은 작지만 44px 히트 영역으로 확장됩니다(모바일 터치 타깃)
• :focus-visible 2px focus-ring 링, 아이콘은 장식(aria-hidden 처리된 CloseIcon)
• 잉크는 *-text 토큰 — AA 대비 빌드 게이트 보장

토큰#

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