Badge

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

개요

Badge는 작은 라벨 형태로 상태, 카테고리, 또는 개수를 표시하는 컴포넌트입니다. 색상을 통해 직관적으로 정보를 전달하며, 텍스트만으로도 충분한 정보를 제공합니다.

주요 특징:

5가지 Variant (default, success, warning, danger, info)
3가지 Size (sm, md, lg)
닫기 버튼 옵션
숫자 뱃지 지원

사용 사례:

상태 표시 (성공, 실패, 대기 등)
카테고리 태그
알림 개수 표시
레이블링

설치


npx @vortex/cli add badge --package foundation

기본 사용법


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

Variants (변형)

Default

기본 스타일의 뱃지입니다.


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

Success

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


<Badge variant="success">Success</Badge>

Warning

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


<Badge variant="warning">Warning</Badge>

Danger

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


<Badge variant="danger">Error</Badge>

Info

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


<Badge variant="info">Info</Badge>

Sizes (크기)

Small


<Badge size="sm">Small</Badge>

Medium (기본)


<Badge size="md">Medium</Badge>

Large


<Badge size="lg">Large</Badge>

닫기 버튼


<Badge onClose={() => console.log("closed")}>Closable Badge</Badge>

Props API

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

접근성

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

ARIA 속성:

role="status" (상태 표시 시)
aria-label (아이콘만 있을 경우 필수)

색상 대비:

Default: 4.5:1 이상
Success: 4.5:1 이상
Warning: 4.5:1 이상
Danger: 4.5:1 이상
Info: 4.5:1 이상

스크린 리더 지원:

뱃지 텍스트가 명확하게 읽힘
상태 변화 안내

예제

예제 1: 상태 표시


export default function StatusBadges() {
  return (
    <div className="flex gap-md">
      <Badge variant="success">완료</Badge>
      <Badge variant="warning">대기</Badge>
      <Badge variant="danger">실패</Badge>
      <Badge variant="info">진행 중</Badge>
    </div>
  );
}

예제 2: 알림 개수


export default function NotificationBadge() {
  const [count, setCount] = useState(5);
 
  return (
    <div className="relative inline-block">
      <Button>
        <Bell size={20} />
      </Button>
      {count > 0 && (
        <Badge variant="danger" size="sm" className="absolute -top-2 -right-2">
          {count}
        </Badge>
      )}
    </div>
  );
}