CoreTag

Usage

기본 사용법

import { CoreTag } from '@featuring-corp/components';

<CoreTag tagType="primary" size="md" text="Tag" />

다양한 타입

import { CoreTag } from '@featuring-corp/components';

<CoreTag tagType="primary" text="Tag" />
<CoreTag tagType="gray" text="Tag" />
<CoreTag tagType="red" text="Tag" />
<CoreTag tagType="orange" text="Tag" />
<CoreTag tagType="lightGreen" text="Tag" />
<CoreTag tagType="teal" text="Tag" />
<CoreTag tagType="blue" text="Tag" />
<CoreTag tagType="indigo" text="Tag" />
<CoreTag tagType="magenta" text="Tag" />
<CoreTag tagType="contrast" text="Tag" />

크기 설정

import { CoreTag } from '@featuring-corp/components';

<CoreTag tagType="primary" size="xs" text="Tag" />
<CoreTag tagType="primary" size="sm" text="Tag" />
<CoreTag tagType="primary" size="md" text="Tag" />

삭제 가능한 태그

import { CoreTag } from '@featuring-corp/components';

<CoreTag 
  tagType="primary" 
  text="Tag" 
  onDelete={() => {
    console.log('delete');
  }} 
/>

Hover Effect

import { CoreTag } from '@featuring-corp/components';

<CoreTag 
  tagType="primary" 
  text="Tag" 
  hoverEffect 
/>

Leading Element

import { CoreTag } from '@featuring-corp/components';
import { IconInformationFilled } from '@featuring-corp/icons';

<CoreTag 
  tagType="primary" 
  text="Tag" 
  leadingElement={<IconInformationFilled />} 
/>

비활성화 상태

import { CoreTag } from '@featuring-corp/components';

<CoreTag 
  tagType="primary" 
  text="Tag" 
  disabled 
/>

모든 기능 조합

import { CoreTag } from '@featuring-corp/components';
import { IconInformationFilled } from '@featuring-corp/icons';

<CoreTag 
  tagType="primary" 
  size="md"
  text="Tag" 
  leadingElement={<IconInformationFilled />}
  hoverEffect
  onDelete={() => {
    console.log('delete');
  }}
/>

Props

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

Prop

Type

CoreTagType

Prop

Type

CoreTagSize

Prop

Type

스타일

기본 스타일 속성

display: flex
justify-content: center
gap: spacing-100 (4px)
border-radius: radius-100
transition: 0.2s
flex-shrink: 0
outline: 1px solid transparent (focus 시 변경)
width: max-content (기본값)
max-width: 100% (기본값)

Size Variants

Size	Height	Padding X	Padding Y	Typography
`xs`	`20px`	`spacing-100` (4px)	`spacing-50` (2px)	`caption[1]`
`sm`	`22px`	`spacing-150` (6px)	`spacing-50` (2px)	`body[1]`
`md`	`26px`	`spacing-200` (8px)	`spacing-100` (4px)	`body[1]`

Tag Type Variants (상태별 토큰)

각 tagType별 기본 및 hover 상태:

Primary

Default: background-color: tag-primary-default, color: tag-primary-text
Hover (hoverEffect: on): background-color: tag-primary-hover

Gray

Default: background-color: tag-gray-default, color: tag-gray-text
Hover (hoverEffect: on): background-color: tag-gray-hover

Red

Default: background-color: tag-red-default, color: tag-red-text
Hover (hoverEffect: on): background-color: tag-red-hover

Orange

Default: background-color: tag-orange-default, color: tag-orange-text
Hover (hoverEffect: on): background-color: tag-orange-hover

LightGreen

Default: background-color: tag-lightGreen-default, color: tag-lightGreen-text
Hover (hoverEffect: on): background-color: tag-lightGreen-hover

Teal

Default: background-color: tag-teal-default, color: tag-teal-text
Hover (hoverEffect: on): background-color: tag-teal-hover

Blue

Default: background-color: tag-blue-default, color: tag-blue-text
Hover (hoverEffect: on): background-color: tag-blue-hover

Indigo

Default: background-color: tag-indigo-default, color: tag-indigo-text
Hover (hoverEffect: on): background-color: tag-indigo-hover

Magenta

Default: background-color: tag-magenta-default, color: tag-magenta-text
Hover (hoverEffect: on): background-color: tag-magenta-hover

Contrast

Default: background-color: tag-contrast-default, color: tag-contrast-text
Hover (hoverEffect: on): background-color: tag-contrast-hover

States

Focus: outline: 1px solid focus 색상
Disabled (aria-disabled="true"): background-color: background[4], color: text[4], cursor: default, pointer-events: none, user-select: none
Disabled + Focus: outline: 1px solid transparent

On this page