Badge

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

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

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

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

npx @seed-design/cli@latest add ui:badge

pnpm dlx @seed-design/cli@latest add ui:badge

yarn dlx @seed-design/cli@latest add ui:badge

bun x @seed-design/cli@latest add ui:badge

의존성 설치

npm install @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react

yarn add @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react

pnpm add @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react

bun add @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react

아래 코드를 복사 후 붙여넣고 사용하세요

/**
 * @file ui:badge
 * @requires @seed-design/lynx-react@>=1.0.0 <2.0.0
 * @requires @seed-design/lynx-css@>=1.0.0 <2.0.0
 * @requires @karrotmarket/lynx-monochrome-icon@>=1.20.0 <2.0.0
 **/

import IconILowercaseSerifCircleLine from "@karrotmarket/lynx-monochrome-icon/IconILowercaseSerifCircleLine";
import * as React from "@lynx-js/react";
import { Badge as SeedBadge, Icon, type IconProps } from "@seed-design/lynx-react";

export interface BadgeActionProps
  extends Omit<SeedBadge.ActionProps, "accessibility-label" | "children"> {
  "accessibility-label": string;
  render?: (triggerElement: React.ReactElement) => React.ReactNode;
}

export type BadgeProps = Omit<SeedBadge.RootProps, "children" | "prefix" | "action"> & {
  children: React.ReactNode;
  prefix?: IconProps["icon"];
  actionProps?: BadgeActionProps;
};

export const Badge = React.forwardRef<unknown, BadgeProps>((props, ref) => {
  const { prefix, actionProps, children, ...rootProps } = props;
  let actionElement: React.ReactNode = null;

  if (actionProps) {
    const { render, ...seedActionProps } = actionProps;
    const triggerElement = (
      <SeedBadge.Action {...seedActionProps}>
        <Icon icon={<IconILowercaseSerifCircleLine />} size="full" />
      </SeedBadge.Action>
    );

    actionElement = render ? render(triggerElement) : triggerElement;
  }

  return (
    <SeedBadge.Root ref={ref} {...rootProps}>
      {prefix ? (
        <SeedBadge.Prefix>
          <Icon icon={prefix} size="full" />
        </SeedBadge.Prefix>
      ) : null}
      <SeedBadge.Label>{children}</SeedBadge.Label>
      {actionElement}
    </SeedBadge.Root>
  );
});
Badge.displayName = "Badge";

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */

Props

Prop

Type

style?CSSProperties | undefined

className?string | undefined

childrenReact.ReactNode

prefix?React.ReactElement<LynxIconElementProps, string | React.JSXElementConstructor<any>> | undefined

actionProps?BadgeActionProps | undefined

Usage

import { Badge } from "@/components/ui/badge";

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

Prefix and Action

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

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

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을 전달해 연결할 수 있습니다.

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

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에서 집주인 인증에 관한 설명을 제공합니다.

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

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로 최대 너비를 지정하세요. 지정한 너비를 넘는 내용은 말줄임표로 표시됩니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

웹 버전과의 차이

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

Badge

Manual Installation

의존성 설치

아래 코드를 복사 후 붙여넣고 사용하세요

목차