Tag

카테고리, 필터, 선택 항목을 표시하는 태그 컴포넌트입니다.

기본 (Filled)

연한 배경의 기본 태그입니다. 공통 color_* 클래스로 의미에 따른 색상을 적용합니다.

DefaultPrimarySuccessWarningDangerInfo

시맨틱 요소

일반 Tag는 기본적으로 span을 사용하며, as prop으로 콘텐츠 구조와 의미에 맞는 HTML 요소 또는 커스텀 컴포넌트를 지정합니다. checkable·add·href 사용 시에는 접근성을 위해 button 또는 a를 자동으로 사용합니다.

솔리드

variant="solid"로 tag_solid 채움 배경·대비 텍스트를 적용합니다.

DefaultPrimarySuccessWarningDangerInfo

아웃라인

variant="outline"으로 배경 없이 테두리만 표시합니다.

DefaultPrimarySuccessWarningDangerInfo

크기

size prop으로 tag_sm · tag_lg 스케일을 조절합니다. Filled · Outline · Solid 모두 적용 가능합니다.

둥근

round prop으로 tag_round pill 형태의 모서리를 적용합니다.

FilledOutlineSolidBorderless

아이콘

icon 슬롯으로 텍스트 앞에 아이콘을 배치합니다. 크기는 태그 스케일에 맞춰 조절됩니다.

DesignVerifiedErrorUser

닫기 가능

closable prop과 close-label로 제거 가능한 태그를 만듭니다.

선택 가능

checkable prop으로 필터·토글 태그를 만듭니다. selected prop으로 is-selected 상태를 표시합니다.

추가

add prop으로 새 항목을 추가하는 버튼 형태의 태그를 만듭니다.

링크

href prop으로 클릭 가능한 태그 링크(a.tag)를 만듭니다.

문서 보기 가이드 바로가기 외부 링크

비활성

disabled prop으로 is-disabled 상태를 표시합니다. button 태그에는 disabled 속성을 함께 사용합니다.

FilledOutlineSolid

그룹

TagGroup으로 여러 태그를 묶어 표시합니다. tight prop으로 tag_group-tight 간격을 줄일 수 있습니다.

선택된 기술 스택

API · Tag Props

Prop	타입	기본값	설명
`as`	string \| Component	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	—	태그 텍스트. default 슬롯으로 대체 가능
`href`	string	—	링크 태그일 때 href (a 태그)
`close-label`	string	—	닫기 버튼 aria-label
`ripple`	boolean	—	클릭 파장(ripple). checkable · add · href 변형에서 true 시 활성 · tag_close는 별도 적용

closable 태그는 @close 이벤트를 발생시킵니다.

API · TagGroup Props

Prop	타입	기본값	설명
`tight`	boolean	false	좁은 간격 (tag_group-tight)
`aria-label`	string	—	그룹 접근성 라벨

API · Tag Slots

슬롯	설명
`default`	태그 텍스트 (label prop 대체)
`icon`	텍스트 앞 아이콘 (tag_icon)

API · TagGroup Slots

슬롯	설명
`default`	Tag 자식 목록

클래스 · 속성

Vue 컴포넌트가 렌더하는 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	추가 태그 테두리