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

상태나 속성을 짧은 텍스트로 표시하는 정보성 컴포넌트입니다.

Lynx Engine 최소 버전: 3.6

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

## Preview

```tsx
import { root } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";
import "./styles";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="badge-preview">
        <Badge>라벨</Badge>
      </view>
    </page>
  );
}

root.render(<Root />);
```

## 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
import { Badge } from "@/components/ui/badge";

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

## Prefix and Action

`prefix`에 Label 앞에 표시할 아이콘을 전달하세요.

```tsx
import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill";
import { root } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";
import "./styles";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="badge-preview">
        <Badge prefix={<IconPlusFill />}>추가</Badge>
      </view>
    </page>
  );
}

root.render(<Root />);
```

정보 아이콘에는 안내의 양과 사용자가 해야 할 일에 맞는 UI를 연결하세요. 간단한 동작은 `action`에 `accessibility-label`과 `bindtap`을 전달해 연결할 수 있습니다.

```tsx
import { root } from "@lynx-js/react";
import { useSeedClassName } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";
import "./styles";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="badge-preview">
        <Badge
          actionProps={{
            "accessibility-label": "도움말",
            bindtap: () => console.log("도움말 열기"),
          }}
        >
          판매 완료
        </Badge>
      </view>
    </page>
  );
}

root.render(<Root />);
```

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

```tsx
import "./styles";

import { root, useState } from "@lynx-js/react";
import { ActionButton, useSeedClassName } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";
import {
  BottomSheetBody,
  BottomSheetContent,
  BottomSheetFooter,
  BottomSheetRoot,
} from "@/components/ui/bottom-sheet";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [open, setOpen] = useState(false);

  function handleOpen() {
    "background only";
    setOpen(true);
  }

  function handleClose() {
    "background only";
    setOpen(false);
  }

  return (
    <page className={seedClassName}>
      <view className="badge-preview">
        <BottomSheetRoot open={open} onOpenChange={setOpen}>
          <Badge
            actionProps={{
              "accessibility-label": "집주인 인증 안내",
              bindtap: handleOpen,
            }}
          >
            집주인
          </Badge>
          <BottomSheetContent
            title="집주인 인증 매물"
            description="집주인이 직접 등록한 매물에 표시돼요."
          >
            <BottomSheetBody>
              <text>
                매물을 올린 사람이 집주인임을 확인할 수 있어, 중개소에서 등록한 매물과 구분할 수
                있어요.
              </text>
            </BottomSheetBody>
            <BottomSheetFooter>
              <ActionButton variant="brandSolid" bindtap={handleClose}>
                확인
              </ActionButton>
            </BottomSheetFooter>
          </BottomSheetContent>
        </BottomSheetRoot>
      </view>
    </page>
  );
}

root.render(<Root />);
```

## Examples

### Truncating Behavior

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

```tsx
import { root } from "@lynx-js/react";
import { VStack, useSeedClassName } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";
import "./styles";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="badge-preview">
        <VStack gap="x4">
          <Badge style={{ maxWidth: "120px" }}>
            In velit velit deserunt amet veniam incididunt consectetur incididunt Lorem.
          </Badge>
          <Badge style={{ maxWidth: "200px" }}>
            In velit velit deserunt amet veniam incididunt consectetur incididunt Lorem.
          </Badge>
        </VStack>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Tones and Variants

#### Neutral

```tsx
import { root } from "@lynx-js/react";
import { HStack, useSeedClassName, VStack } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";
import "./styles";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="badge-preview">
        <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>
      </view>
    </page>
  );
}

root.render(<Root />);
```

#### Brand

```tsx
import { root } from "@lynx-js/react";
import { HStack, useSeedClassName, VStack } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";
import "./styles";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="badge-preview">
        <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>
      </view>
    </page>
  );
}

root.render(<Root />);
```

#### Informative

```tsx
import { root } from "@lynx-js/react";
import { HStack, useSeedClassName, VStack } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";
import "./styles";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="badge-preview">
        <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>
      </view>
    </page>
  );
}

root.render(<Root />);
```

#### Positive

```tsx
import { root } from "@lynx-js/react";
import { HStack, useSeedClassName, VStack } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";
import "./styles";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="badge-preview">
        <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>
      </view>
    </page>
  );
}

root.render(<Root />);
```

#### Warning

```tsx
import { root } from "@lynx-js/react";
import { HStack, useSeedClassName, VStack } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";
import "./styles";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="badge-preview">
        <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>
      </view>
    </page>
  );
}

root.render(<Root />);
```

#### Critical

```tsx
import { root } from "@lynx-js/react";
import { HStack, useSeedClassName, VStack } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";
import "./styles";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="badge-preview">
        <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>
      </view>
    </page>
  );
}

root.render(<Root />);
```

## 웹 버전과의 차이

<Callout type="warning">
  Lynx Badge는 React Badge와 같은 `size`, `variant`, `tone` 표면을 사용하지만, 네이티브 `<view>` root와 `<text>` label을 렌더링합니다. HTML span attribute나 `asChild`는 제공하지 않습니다.
</Callout>