Tag
키워드 또는 레이블을 사용하여 콘텐츠를 분류하는 컴포넌트입니다.
개요
Tag는 콘텐츠 항목에 분류 체계, 데이터 속성을 표시하거나 필터링/정렬 옵션을 관리하는 데 사용됩니다. Tag, SelectableTag, RemovableTag, TagGroup 네 가지 컴포넌트를 제공합니다.
기본 태그Primary성공경고오류
설치
사용법
Tag, SelectableTag, RemovableTag, TagGroup을 import하여 사용합니다.
예제
기본 태그
정보 표시용 비대화형 태그입니다. 콘텐츠의 분류나 속성을 나타냅니다.
기본PrimarySecondarySuccessWarningErrorInfo
아웃라인 스타일
테두리만 있는 태그 스타일입니다.
기본PrimarySuccessWarningError
크기
sm, md, lg 세 가지 크기를 지원합니다.
SmallMediumLarge
아이콘 태그
icon prop으로 아이콘을 추가할 수 있습니다.
인기상승빠른배송
선택 가능한 태그 (SelectableTag)
필터링 옵션으로 사용되는 선택 가능한 태그입니다. 선택 시 체크 아이콘이 표시됩니다.
삭제 가능한 태그 (RemovableTag)
삭제 버튼이 있는 태그입니다. 필터링 옵션에서 선택된 조건을 삭제할 때 사용합니다.
서울부산대전
태그 그룹 (TagGroup)
여러 태그를 그룹화하고 전체 삭제 기능을 제공합니다.
서울부산대전
접근성
Tag는 WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.
- SelectableTag: role="checkbox"와 aria-checked 속성으로 선택 상태를 스크린리더에 전달합니다.
- RemovableTag: 삭제 버튼에 aria-label로 명확한 레이블을 제공합니다.
- 키보드 네비게이션: Tab으로 포커스 이동, Enter 또는 Space로 선택/삭제가 가능합니다.
- 포커스 표시: 대화형 태그에 명확한 포커스 링이 표시됩니다.
- 명도 대비 4.5:1 이상을 준수하여 시각적 접근성을 보장합니다.