CoreTag

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Tag를 사용하세요.

CoreTag는 단일 props 기반 태그 컴포넌트입니다.

10가지 tagType — primary, gray, red, orange, lightGreen, teal, blue, indigo, magenta, contrast
3가지 size — xs, sm, md
삭제 버튼 — onDelete prop으로 X 버튼 자동 생성
Hover 효과 — hoverEffect prop으로 활성화
Leading / Trailing element — 앞뒤에 아이콘 등 배치 가능

Usage

기본 사용법

<HStack $css={{ gap: '8px', flexWrap: 'wrap' }}>
<CoreTag tagType="primary" text="Primary" />
<CoreTag tagType="gray" text="Gray" />
<CoreTag tagType="red" text="Red" />
<CoreTag tagType="orange" text="Orange" />
<CoreTag tagType="lightGreen" text="LightGreen" />
<CoreTag tagType="teal" text="Teal" />
<CoreTag tagType="blue" text="Blue" />
<CoreTag tagType="indigo" text="Indigo" />
<CoreTag tagType="magenta" text="Magenta" />
<CoreTag tagType="contrast" text="Contrast" />
</HStack>

크기 설정

<HStack $css={{ gap: '8px', alignItems: 'center' }}>
<CoreTag tagType="primary" size="xs" text="xs" />
<CoreTag tagType="primary" size="sm" text="sm" />
<CoreTag tagType="primary" size="md" text="md" />
</HStack>

삭제 가능한 태그

() => {
const [tags, setTags] = React.useState(['React', 'TypeScript', 'Vanilla Extract']);
return (
  <HStack $css={{ gap: '8px' }}>
    {tags.map((tag) => (
      <CoreTag
        key={tag}
        tagType="primary"
        text={tag}
        onDelete={() => setTags((prev) => prev.filter((t) => t !== tag))}
      />
    ))}
  </HStack>
);
}

Leading Element와 Hover Effect

<HStack $css={{ gap: '8px' }}>
<CoreTag tagType="blue" text="정보" leadingElement={<IconInformationFilled />} />
<CoreTag tagType="primary" text="Hover 효과" hoverEffect />
</HStack>

비활성화 상태

<HStack $css={{ gap: '8px' }}>
<CoreTag tagType="primary" text="Disabled" disabled />
<CoreTag tagType="gray" text="Disabled" disabled />
</HStack>

Props

ComponentPropsWithoutRef<'div'>을 확장한 컴포넌트입니다.

Prop

Type

CoreTagType

Prop

Type

CoreTagSize

Prop

Type

스타일

Size Variants

Size	Height	Padding X	Padding Y	Typography
`xs`	`20px`	`4px`	`2px`	`caption[1]`
`sm`	`22px`	`6px`	`2px`	`body[1]`
`md`	`26px`	`8px`	`4px`	`body[1]`

Tag Type — 상태별 토큰

각 tagType은 tag-{type}-default (기본) / tag-{type}-hover (hover) 배경색 토큰을 사용합니다. Disabled 상태에서는 background[4] + text[4]로 통일됩니다.

마이그레이션 가이드

Tag는 Compound composition 패턴으로 레이아웃 구성이 유연합니다.

Before / After

// Before (CoreTag)
<CoreTag
  tagType="primary"
  size="md"
  text="React"
  leadingElement={<IconInformationFilled />}
  onDelete={() => handleDelete('React')}
/>

// After (Tag)
<Tag.Root tagType="primary" size="md">
  <Tag.Icon><IconInformationFilled /></Tag.Icon>
  <Tag.Text>React</Tag.Text>
  <Tag.RemoveButton onClick={() => handleDelete('React')} />
</Tag.Root>

변경 사항

CoreTag	Tag
`text` prop	`Tag.Text` 서브컴포넌트
`leadingElement`	`Tag.Icon` 서브컴포넌트
`onDelete`	`Tag.RemoveButton`의 `onClick`
`hoverEffect`	`Tag.Root`의 `hoverEffect` (동일)
`disabled`	`Tag.Root`의 `disabled` (동일)

On this page