Skip to Content
ComponentsIcignalData DisplayTag

Tag

태그를 표시하는 컴포넌트입니다.

개요

Tag는 레이블이나 카테고리를 표시하는 컴포넌트입니다. iCignal Tag는 iCignal 브랜드 컬러가 적용되어 있으며, 리포트 카테고리와 데이터 필터를 시각적으로 구분합니다. Foundation Tag의 모든 기능을 상속합니다.

사용 사례:

  • iCignal 리포트 카테고리 태그
  • 데이터 필터 표시
  • 캠페인 타입 라벨
  • 분석 주제 태그

알림: 이 컴포넌트는 현재 구현 중입니다. 임시로 Badge를 사용할 수 있습니다.

기본 사용법

import "@vortex/ui-icignal/theme"; // iCignal 테마 적용
import { Badge } from "@vortex/ui-icignal";
 
<Badge>Tag</Badge>;

iCignal 브랜딩

iCignal 특화 사용 가이드

리포트 카테고리:

import { Badge } from "@vortex/ui-icignal";
 
<div className="flex gap-sm flex-wrap">
  <Badge variant="default">트래픽</Badge>
  <Badge variant="default">전환</Badge>
  <Badge variant="default">사용자 행동</Badge>
  <Badge variant="default">SEO</Badge>
</div>;

데이터 필터 표시:

import { Badge } from "@vortex/ui-icignal";
import { X } from "lucide-react";
 
<div className="flex gap-sm flex-wrap">
  <Badge className="flex items-center gap-xs">
    최근 30일
    <X size={12} className="cursor-pointer" />
  </Badge>
  <Badge className="flex items-center gap-xs">
    웹사이트
    <X size={12} className="cursor-pointer" />
  </Badge>
</div>;

Foundation과의 차이점

속성FoundationiCignal
스타일중립적iCignal 브랜드 컬러
사용 맥락범용Analytics/Reports 카테고리
테마중립적 테마iCignal 테마 (@vortex/ui-icignal/theme)

관련 컴포넌트

Last updated on
TableAlert