Badge

상태나 카테고리를 표시하는 뱃지 컴포넌트입니다.

개요

Badge는 작은 라벨 형태로 상태, 카테고리, 또는 개수를 표시하는 컴포넌트입니다. iCignal Badge는 브랜드 컬러(Blue, Green, Orange)를 활용하여 직관적으로 정보를 전달합니다.

주요 특징:

5가지 Variant (default, success, warning, danger, info)
3가지 Size (sm, md, lg)
iCignal 브랜드 컬러 적용
닫기 버튼 옵션
숫자 뱃지 지원

사용 사례:

iCignal 데이터 상태 표시 (완료, 처리중, 실패)
분석 카테고리 태그
알림 개수 표시
리포트 레이블링

설치


npx @vortex/cli add badge --package icignal

기본 사용법


import "@vortex/ui-icignal/theme";
import { Badge } from "@vortex/ui-icignal";
 
export default function Example() {
  return <Badge>New</Badge>;
}

Variants (변형)

Default


<Badge variant="default">Default</Badge>

Success (iCignal Green)

성공 상태를 나타내는 iCignal Green 뱃지입니다.


<Badge variant="success">완료</Badge>

Warning (iCignal Orange)

경고 상태를 나타내는 iCignal Orange 뱃지입니다.


<Badge variant="warning">주의 필요</Badge>

Danger

위험 또는 실패 상태를 나타내는 뱃지입니다.


<Badge variant="danger">실패</Badge>

Info (iCignal Blue)

정보성 내용을 나타내는 iCignal Blue 뱃지입니다.


<Badge variant="info">처리중</Badge>

iCignal 브랜딩

브랜드 컬러

Success (Green): #4caf50 - 데이터 수집 완료, 분석 성공
Warning (Orange): #ff9800 - 주의 필요, 설정 확인
Info (Blue): #2196f3 - 처리중, 진행중

iCignal 특화 사용 가이드

데이터 상태 표시:


<Badge variant="success">수집 완료</Badge>
<Badge variant="info">분석중</Badge>
<Badge variant="warning">재시도 필요</Badge>
<Badge variant="danger">오류</Badge>

분석 카테고리:


<div className="flex gap-sm">
  <Badge variant="info">실시간</Badge>
  <Badge variant="default">일별</Badge>
  <Badge variant="default">주별</Badge>
  <Badge variant="default">월별</Badge>
</div>

Foundation과의 차이점

속성	Foundation	iCignal
Success Color	중립 녹색	`#4caf50` (iCignal Green)
Info Color	중립 파란색	`#2196f3` (iCignal Blue)
Warning Color	중립 주황색	`#ff9800` (iCignal Orange)
사용 맥락	범용	iCignal 데이터 상태 표시

Props API

Prop	Type	Default	Description
variant	’default’ \| ‘success’ \| ‘warning’ \| ‘danger’ \| ‘info'	'default’	뱃지 변형
size	’sm’ \| ‘md’ \| ‘lg'	'md’	뱃지 크기
closable	boolean	false	닫기 버튼 표시
onClose	() => void	-	닫기 버튼 클릭 핸들러
className	string	-	추가 CSS 클래스
children	ReactNode	-	뱃지 내용

접근성

Badge 컴포넌트는 WCAG 2.1 AA 기준을 준수합니다.

ARIA 속성:

role="status" (상태 뱃지)
aria-label (닫기 버튼)

색상 대비 (iCignal 브랜드 컬러 기준):

Success: 4.5:1 이상
Warning: 3:1 이상
Info: 4.5:1 이상

예제

예제 1: iCignal 데이터 상태 표시


import "@vortex/ui-icignal/theme";
import { Badge } from "@vortex/ui-icignal";
 
export default function DataStatusBadges() {
  return (
    <Table>
      <TableRow>
        <TableCell>2024-01-15 데이터</TableCell>
        <TableCell>
          <Badge variant="success">수집 완료</Badge>
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>2024-01-16 데이터</TableCell>
        <TableCell>
          <Badge variant="info">분석중</Badge>
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>2024-01-17 데이터</TableCell>
        <TableCell>
          <Badge variant="warning">재시도 필요</Badge>
        </TableCell>
      </TableRow>
    </Table>
  );
}

예제 2: iCignal 알림 개수 뱃지


import "@vortex/ui-icignal/theme";
import { Badge } from "@vortex/ui-icignal";
import { Bell } from "lucide-react";
 
export default function NotificationBadge() {
  return (
    <Button variant="ghost" className="relative">
      <Bell size={20} />
      <Badge variant="danger" size="sm" className="absolute -top-1 -right-1">
        3
      </Badge>
    </Button>
  );
}