# 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

## Installation

- npm: npm install @seed-design/lynx-react @seed-design/lynx-css
- pnpm: pnpm add @seed-design/lynx-react @seed-design/lynx-css
- yarn: yarn add @seed-design/lynx-react @seed-design/lynx-css
- bun: bun add @seed-design/lynx-react @seed-design/lynx-css

<Callout>
  Lynx `Badge`는 별도 `ui:badge` snippet 없이 `@seed-design/lynx-react` 패키지에서 직접 제공합니다.
</Callout>

## Usage

## Preview

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

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

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

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

## Props

## Examples

### Truncating Behavior

Badge는 긴 텍스트를 잘라내고 생략 부호를 표시합니다.

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

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

  return (
    <page className={seedClassName}>
      <view className="badge-preview">
        <VStack gap="x4">
          <Badge size="medium">
            In velit velit deserunt amet veniam incididunt consectetur incididunt Lorem.
          </Badge>
          <Badge size="large">
            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 { Badge, HStack, useSeedClassName, VStack } from "@seed-design/lynx-react";
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 { Badge, HStack, useSeedClassName, VStack } from "@seed-design/lynx-react";
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 { Badge, HStack, useSeedClassName, VStack } from "@seed-design/lynx-react";
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 { Badge, HStack, useSeedClassName, VStack } from "@seed-design/lynx-react";
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 { Badge, HStack, useSeedClassName, VStack } from "@seed-design/lynx-react";
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 { Badge, HStack, useSeedClassName, VStack } from "@seed-design/lynx-react";
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` variant surface를 사용하지만, 렌더링 플랫폼 차이로 다음과 같은 차이가 있습니다.

  - **렌더링 요소**: HTML `<span>` 대신 네이티브 `<view>` root와 `<text>` label을 렌더링합니다.
  - **공개 표면**: React와 동일하게 package export로 제공하며, Lynx 전용 `ui:badge` snippet은 제공하지 않습니다.
  - **ref forwarding**: `React.forwardRef`로 root `<view>`에 ref를 전달할 수 있습니다.
  - **이벤트 핸들링**: Badge는 정적 정보 표시용 컴포넌트라 별도 interaction prop을 추가하지 않습니다.
  - **다형 렌더링**: 웹의 `asChild` / HTML span attribute 표면은 Lynx에서 제공하지 않습니다.
</Callout>