Tag

항목의 속성, 분류, 선택 조건을 시각적으로 표현하기 위한 컴포넌트

개요

Tag 컴포넌트는 검색 조건, 필터, 카테고리 등을 시각적으로 표현합니다. 텍스트 기반의 간결한 UI로, 색상 타입과 선택 상태를 지원하며 삭제 버튼을 선택적으로 제공합니다.

주요 특징

• ✅ 텍스트 표시: 단일 텍스트(Label) 표시
• ✅ 색상 타입: Default, Selected, Filter, Outline
• ✅ 선택 상태: 선택/비선택 시각적 구분
• ✅ 삭제 버튼: X 버튼으로 제거 지원
• ✅ 텍스트 기반: 아이콘 없이 텍스트만 사용

기본 상태 / 텍스트 표시

import { Tag } from "@vortex/ui-icignal"
 
<Tag>기본 태그</Tag>

색상 타입 적용

Tag 유형에 따라 사전에 정의된 색상 타입을 적용할 수 있습니다.

<Tag variant="default">Default</Tag>
<Tag variant="selected">Selected</Tag>
<Tag variant="filter">Filter</Tag>
<Tag variant="outline">Outline</Tag>

선택 상태 표시

선택된 Tag는 비선택 상태와 시각적으로 구분되어 표시됩니다.

<Tag variant="default">비선택</Tag>
<Tag variant="default" selected>선택됨</Tag>
<Tag variant="outline">비선택</Tag>
<Tag variant="outline" selected>선택됨</Tag>

삭제 버튼 표시

Tag 우측에 삭제(X) 버튼을 표시할 수 있습니다.

<Tag removable onRemove={() => console.log("removed")}>
  삭제 가능
</Tag>
<Tag variant="filter" removable onRemove={() => handleRemove()}>
  필터 삭제
</Tag>

아이콘 제한

Tag는 기본적으로 텍스트 기반이며, 아이콘은 사용하지 않습니다.

<Tag>텍스트만 표시</Tag>
<Tag variant="filter">필터 조건</Tag>
<Tag variant="outline">카테고리</Tag>

API Reference

Props

Events

기본 사용법

import { Tag } from "@vortex/ui-icignal"
 
<Tag variant="filter" selected removable onRemove={() => handleRemove()}>
  검색 조건
</Tag>

접근성

권장 사항

• ✅ 삭제 버튼에 aria-label="Remove tag" 자동 적용
• ✅ 의미 있는 텍스트로 Tag의 목적을 전달
• ❌ 아이콘만으로 Tag를 구성하지 않음

관련 컴포넌트

• Badge: 상태 표시 (읽기 전용)
• Toggle: 선택/해제 토글