@gpters-internal/ui

Badge

상태나 카테고리를 나타내는 작은 라벨 컴포넌트

Variants

6가지 variant를 제공합니다.

DefaultSecondaryDestructiveOutlineGhostLink
tsx
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="ghost">Ghost</Badge>
<Badge variant="link">Link</Badge>

As Link

asChild prop을 사용하여 링크로 사용할 수 있습니다.

Clickable BadgeOutline Link
tsx
<Badge asChild>
  <a href="#">Clickable Badge</a>
</Badge>
<Badge variant="outline" asChild>
  <a href="#">Outline Link</a>
</Badge>

Use Cases

상태 표시, 태그, 알림 카운트 등에 활용합니다.

NewIn ProgressUrgentDraft
tsx
{/* Status indicators */}
<Badge variant="default">New</Badge>
<Badge variant="secondary">In Progress</Badge>
<Badge variant="destructive">Urgent</Badge>
<Badge variant="outline">Draft</Badge>

Usage

tsx
import { Badge } from '@gpters-internal/ui';

function Example() {
  return (
    <Badge variant="default">
      Label
    </Badge>
  );
}