# Badge
URL: /react/components/badge
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/badge.mdx

객체의 속성이나 상태를 시각적으로 표현하는 작은 텍스트 라벨입니다. 사용자의 주의를 끌고 콘텐츠의 빠른 인지와 탐색을 돕기 위해 사용됩니다.

사용 가능 버전: @seed-design/react@0.0.1, @seed-design/css@0.0.1

## Preview

```tsx
"use client";

import { Badge } from "seed-design/ui/badge";

export default function BadgePreview() {
  return <Badge>라벨</Badge>;
}
```

## Installation

- npm: npx @seed-design/cli@latest add ui:badge
- pnpm: pnpm dlx @seed-design/cli@latest add ui:badge
- yarn: yarn dlx @seed-design/cli@latest add ui:badge
- bun: bun x @seed-design/cli@latest add ui:badge

## Props

## Usage

```tsx
"use client";

import { Badge } from "seed-design/ui/badge";

export function Example() {
  return <Badge>라벨</Badge>;
}
```

## Prefix and Action

`prefix`에는 Label 앞에 표시할 아이콘 요소를 전달합니다.

```tsx
"use client";

import { IconHeartFill } from "@karrotmarket/react-monochrome-icon";
import { Badge } from "seed-design/ui/badge";

export default function BadgePrefix() {
  return <Badge prefix={<IconHeartFill />}>관심 등록</Badge>;
}
```

정보 아이콘에는 안내의 양과 사용자가 해야 할 일에 맞는 UI를 연결하세요. 짧은 설명에는 `action.render`로 Help Bubble을 연결할 수 있습니다.

```tsx
"use client";

import { HelpBubbleTooltipTrigger } from "seed-design/ui/help-bubble-tooltip";
import { Badge } from "seed-design/ui/badge";

export default function BadgeWithAction() {
  return (
    <Badge
      actionProps={{
        "aria-label": "도움말",
        render: (trigger) => (
          <HelpBubbleTooltipTrigger title="판매 완료된 상품이에요">
            {trigger}
          </HelpBubbleTooltipTrigger>
        ),
      }}
    >
      판매 완료
    </Badge>
  );
}
```

설명이 길거나 사용자의 확인이 필요하면 Bottom Sheet를 연결할 수 있습니다. 다음 예시는 부동산 게시글의 `집주인` Badge에서 집주인 인증에 관한 설명을 제공합니다.

```tsx
"use client";

import { useState } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import { Badge } from "seed-design/ui/badge";
import {
  BottomSheetBody,
  BottomSheetContent,
  BottomSheetFooter,
  BottomSheetRoot,
  BottomSheetTrigger,
} from "seed-design/ui/bottom-sheet";

export default function BadgeWithBottomSheet() {
  const [open, setOpen] = useState(false);

  return (
    <BottomSheetRoot open={open} onOpenChange={setOpen}>
      <Badge
        actionProps={{
          "aria-label": "집주인 인증 안내",
          render: (trigger) => <BottomSheetTrigger asChild>{trigger}</BottomSheetTrigger>,
        }}
      >
        집주인
      </Badge>
      <BottomSheetContent
        title="집주인 인증 매물"
        description="집주인이 직접 등록한 매물에 표시돼요."
      >
        <BottomSheetBody>
          매물을 올린 사람이 집주인임을 확인할 수 있어, 중개소에서 등록한 매물과 구분할 수 있어요.
        </BottomSheetBody>
        <BottomSheetFooter>
          <ActionButton variant="brandSolid" onClick={() => setOpen(false)}>
            확인
          </ActionButton>
        </BottomSheetFooter>
      </BottomSheetContent>
    </BottomSheetRoot>
  );
}
```

## Examples

### Truncating Behavior

긴 라벨을 한 줄로 줄여 표시하려면 `style.maxWidth`로 최대 너비를 지정하세요. 지정한 너비를 넘는 내용은 말줄임표로 표시됩니다.

```tsx
"use client";

import { Badge } from "seed-design/ui/badge";

export default function BadgeTruncating() {
  return (
    <Badge style={{ maxWidth: "120px" }}>
      In velit velit deserunt amet veniam incididunt consectetur incididunt Lorem.
    </Badge>
  );
}
```

### Tones and Variants

#### Neutral

```tsx
"use client";

import { HStack, VStack } from "@seed-design/react";
import { Badge } from "seed-design/ui/badge";

export default function BadgeNeutral() {
  return (
    <HStack gap="x4">
      <VStack gap="x4">
        <Badge tone="neutral" variant="solid" size="medium">
          라벨
        </Badge>
        <Badge tone="neutral" variant="weak" size="medium">
          라벨
        </Badge>
        <Badge tone="neutral" variant="outline" size="medium">
          라벨
        </Badge>
      </VStack>
      <VStack gap="x4">
        <Badge tone="neutral" variant="solid" size="large">
          라벨
        </Badge>
        <Badge tone="neutral" variant="weak" size="large">
          라벨
        </Badge>
        <Badge tone="neutral" variant="outline" size="large">
          라벨
        </Badge>
      </VStack>
    </HStack>
  );
}
```

#### Brand

```tsx
"use client";

import { HStack, VStack } from "@seed-design/react";
import { Badge } from "seed-design/ui/badge";

export default function BadgeBrand() {
  return (
    <HStack gap="x4">
      <VStack gap="x4">
        <Badge tone="brand" variant="solid" size="medium">
          라벨
        </Badge>
        <Badge tone="brand" variant="weak" size="medium">
          라벨
        </Badge>
        <Badge tone="brand" variant="outline" size="medium">
          라벨
        </Badge>
      </VStack>
      <VStack gap="x4">
        <Badge tone="brand" variant="solid" size="large">
          라벨
        </Badge>
        <Badge tone="brand" variant="weak" size="large">
          라벨
        </Badge>
        <Badge tone="brand" variant="outline" size="large">
          라벨
        </Badge>
      </VStack>
    </HStack>
  );
}
```

#### Informative

```tsx
"use client";

import { HStack, VStack } from "@seed-design/react";
import { Badge } from "seed-design/ui/badge";

export default function BadgeInformative() {
  return (
    <HStack gap="x4">
      <VStack gap="x4">
        <Badge tone="informative" variant="solid" size="medium">
          라벨
        </Badge>
        <Badge tone="informative" variant="weak" size="medium">
          라벨
        </Badge>
        <Badge tone="informative" variant="outline" size="medium">
          라벨
        </Badge>
      </VStack>
      <VStack gap="x4">
        <Badge tone="informative" variant="solid" size="large">
          라벨
        </Badge>
        <Badge tone="informative" variant="weak" size="large">
          라벨
        </Badge>
        <Badge tone="informative" variant="outline" size="large">
          라벨
        </Badge>
      </VStack>
    </HStack>
  );
}
```

#### Positive

```tsx
"use client";

import { HStack, VStack } from "@seed-design/react";
import { Badge } from "seed-design/ui/badge";

export default function BadgePositive() {
  return (
    <HStack gap="x4">
      <VStack gap="x4">
        <Badge tone="positive" variant="solid" size="medium">
          라벨
        </Badge>
        <Badge tone="positive" variant="weak" size="medium">
          라벨
        </Badge>
        <Badge tone="positive" variant="outline" size="medium">
          라벨
        </Badge>
      </VStack>
      <VStack gap="x4">
        <Badge tone="positive" variant="solid" size="large">
          라벨
        </Badge>
        <Badge tone="positive" variant="weak" size="large">
          라벨
        </Badge>
        <Badge tone="positive" variant="outline" size="large">
          라벨
        </Badge>
      </VStack>
    </HStack>
  );
}
```

#### Warning

```tsx
"use client";

import { HStack, VStack } from "@seed-design/react";
import { Badge } from "seed-design/ui/badge";

export default function BadgeWarning() {
  return (
    <HStack gap="x4">
      <VStack gap="x4">
        <Badge tone="warning" variant="solid" size="medium">
          라벨
        </Badge>
        <Badge tone="warning" variant="weak" size="medium">
          라벨
        </Badge>
        <Badge tone="warning" variant="outline" size="medium">
          라벨
        </Badge>
      </VStack>
      <VStack gap="x4">
        <Badge tone="warning" variant="solid" size="large">
          라벨
        </Badge>
        <Badge tone="warning" variant="weak" size="large">
          라벨
        </Badge>
        <Badge tone="warning" variant="outline" size="large">
          라벨
        </Badge>
      </VStack>
    </HStack>
  );
}
```

#### Critical

```tsx
"use client";

import { HStack, VStack } from "@seed-design/react";
import { Badge } from "seed-design/ui/badge";

export default function BadgeCritical() {
  return (
    <HStack gap="x4">
      <VStack gap="x4">
        <Badge tone="critical" variant="solid" size="medium">
          라벨
        </Badge>
        <Badge tone="critical" variant="weak" size="medium">
          라벨
        </Badge>
        <Badge tone="critical" variant="outline" size="medium">
          라벨
        </Badge>
      </VStack>
      <VStack gap="x4">
        <Badge tone="critical" variant="solid" size="large">
          라벨
        </Badge>
        <Badge tone="critical" variant="weak" size="large">
          라벨
        </Badge>
        <Badge tone="critical" variant="outline" size="large">
          라벨
        </Badge>
      </VStack>
    </HStack>
  );
}
```