Badge

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

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

Installation

npm install @seed-design/lynx-react @seed-design/lynx-css

pnpm add @seed-design/lynx-react @seed-design/lynx-css

yarn add @seed-design/lynx-react @seed-design/lynx-css

bun add @seed-design/lynx-react @seed-design/lynx-css

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

Usage

Lynx 예제를 불러오는 중입니다.

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

Prop

Type

style?CSSProperties | undefined

children?React.ReactNode

className?string | undefined

Examples

Truncating Behavior

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

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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

Lynx 예제를 불러오는 중입니다.

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 />);

웹 버전과의 차이

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에서 제공하지 않습니다.

Badge

목차