Badge

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

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

import { Badge } from "@seed-design/lynx-react";

export function App() {
  return (
    <view>
      <Badge tone="positive" variant="weak">
        거래 가능
      </Badge>
    </view>
  );
}

Tone / Variant

import { Badge } from "@seed-design/lynx-react";

export function BadgeVariants() {
  return (
    <view>
      <Badge tone="neutral" variant="solid">Neutral</Badge>
      <Badge tone="brand" variant="weak">Brand</Badge>
      <Badge tone="informative" variant="outline">Info</Badge>
      <Badge tone="positive" variant="solid">Positive</Badge>
      <Badge tone="warning" variant="weak">Warning</Badge>
      <Badge tone="critical" variant="outline">Critical</Badge>
    </view>
  );
}

Props

Prop

Type

style?CSSProperties | undefined

children?React.ReactNode

className?string | undefined

웹 버전과의 차이

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