Tag
카테고리, 필터, 선택 항목을 표시하는 태그 컴포넌트입니다.
기본 (Filled)
연한 배경의 기본 태그입니다. 공통 color_* 클래스로 의미에 따른 색상을 적용합니다.
시맨틱 요소
일반 Tag는 기본적으로 span을 사용하며, as prop으로 콘텐츠 구조와 의미에 맞는 HTML 요소 또는 커스텀 컴포넌트를 지정합니다. checkable·add·href 사용 시에는 접근성을 위해 button 또는 a를 자동으로 사용합니다.
- React
- Next.js
추천 항목입니다.
솔리드
variant="solid"로 tag_solid 채움 배경·대비 텍스트를 적용합니다.
아웃라인
variant="outline"으로 배경 없이 테두리만 표시합니다.
크기
size prop으로 tag_sm · tag_lg 스케일을 조절합니다. Filled · Outline · Solid 모두 적용 가능합니다.
둥근
round prop으로 tag_round pill 형태의 모서리를 적용합니다.
아이콘
icon prop으로 텍스트 앞에 아이콘을 배치합니다. 크기는 태그 스케일에 맞춰 조절됩니다.
닫기 가능
closable prop과 closeLabel로 제거 가능한 태그를 만듭니다.
선택 가능
checkable prop으로 필터·토글 태그를 만듭니다. selected prop으로 is-selected 상태를 표시합니다.
추가
add prop으로 새 항목을 추가하는 버튼 형태의 태그를 만듭니다.
링크
href prop으로 클릭 가능한 태그 링크(a.tag)를 만듭니다.
비활성
disabled prop으로 is-disabled 상태를 표시합니다. button 태그에는 disabled 속성을 함께 사용합니다.
그룹
TagGroup으로 여러 태그를 묶어 표시합니다. tight prop으로 tag_group-tight 간격을 줄일 수 있습니다.
선택된 기술 스택
API · Tag Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
as | React.ElementType | span | 일반 Tag의 루트 요소 또는 커스텀 컴포넌트. 인터랙션 태그는 button·a를 자동 사용 |
color | string | primary | 공통 color_* 클래스 |
variant | 'filled' | 'solid' | 'outline' | 'borderless' | filled | 태그 스킨 |
size | 'sm' | 'md' | 'lg' | md | tag_sm · tag_lg |
round | boolean | false | pill 형태 (tag_round) |
checkable | boolean | false | 토글 버튼 (tag_checkable) |
add | boolean | false | 추가 버튼 (tag_add) |
closable | boolean | false | 닫기 버튼 표시 |
selected | boolean | false | 선택 상태 (is-selected) |
disabled | boolean | false | 비활성 (is-disabled) |
label | string | — | 태그 텍스트. children으로 대체 가능 |
href | string | — | 링크 태그일 때 href (a 태그) |
closeLabel | string | — | 닫기 버튼 aria-label |
ripple | boolean | — | 클릭 파장(ripple). checkable · add · href 변형에서 true 시 활성 · tag_close는 별도 적용 |
closable 태그는 onClose prop으로 닫기 동작을 처리합니다.
API · TagGroup Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
tight | boolean | false | 좁은 간격 (tag_group-tight) |
ariaLabel | string | — | 그룹 접근성 라벨 |
API · Tag Children
| Children / Prop | 설명 |
|---|---|
label | 태그 텍스트. children으로 대체 가능 |
children | 태그 텍스트 (label prop 대체) |
icon | 텍스트 앞 아이콘 (Vue #icon 슬롯 대응, tag_icon) |
API · TagGroup Children
| Children / Prop | 설명 |
|---|---|
children | Tag 자식 목록 (Vue default 슬롯 대응) |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
tag | 태그 루트 |
tag_solid · tag_outline · tag_borderless | 스킨 변형 |
tag_sm · tag_lg · tag_round | 크기·형태 |
tag_checkable · tag_add | 인터랙션 변형 |
tag_icon · tag_close | 내부 파트 |
tag_group · tag_group-tight | 태그 묶음 |
is-selected · is-disabled | 상태 클래스 |
color_* | 공통 색상 유틸 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--tag-font-size · --tag-padding-y · --tag-padding-x | — | 기본 태그 타이포·패딩 |
--tag-gap | var(--space-xs) | 아이콘·텍스트 간격 |
--tag-close-size | 0.875rem | 닫기 버튼 크기 |
--tag-add-border-style | dashed | 추가 태그 테두리 |