Badge

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

사용 가능 버전@seed-design/[email protected], @seed-design/[email protected]

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

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
 * @requires @seed-design/lynx-css@^1.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

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에 라벨 앞에 표시할 아이콘을 전달합니다.

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

import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill";
import { Badge } from "@/components/ui/badge";

export default function Example() {
  return <Badge prefix={<IconPlusFill />}>추가</Badge>;
}

아이콘에 간단한 동작을 연결하려면 actionProps에 accessibility-label과 bindtap을 전달합니다.

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

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

export default function Example() {
  return (
    <Badge
      actionProps={{
        "accessibility-label": "도움말",
        bindtap: () => console.log("도움말 열기"),
      }}
    >
      판매 완료
    </Badge>
  );
}

긴 설명이나 사용자 확인이 필요하면 Bottom Sheet를 연결할 수 있습니다.

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

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

export default function Example() {
  const [open, setOpen] = useState(false);

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

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

  return (
    <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>
  );
}

Examples

Truncating Behavior

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

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

import { VStack } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";

export default function Example() {
  return (
    <VStack width="full" 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>
  );
}

Tones and Variants

Neutral

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

import { HStack, VStack } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";

export default function Example() {
  return (
    <HStack width="full" 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>
  );
}

Brand

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

import { HStack, VStack } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";

export default function Example() {
  return (
    <HStack width="full" 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>
  );
}

Informative

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

import { HStack, VStack } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";

export default function Example() {
  return (
    <HStack width="full" 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>
  );
}

Positive

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

import { HStack, VStack } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";

export default function Example() {
  return (
    <HStack width="full" 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>
  );
}

Warning

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

import { HStack, VStack } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";

export default function Example() {
  return (
    <HStack width="full" 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>
  );
}

Critical

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

import { HStack, VStack } from "@seed-design/lynx-react";
import { Badge } from "@/components/ui/badge";

export default function Example() {
  return (
    <HStack width="full" 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>
  );
}

웹 버전과의 차이

HTML 속성 대신 Lynx native 접근성 속성과 이벤트를 사용합니다.

Action은 기본적으로 버튼으로 노출됩니다. 접근성 속성을 덮어쓸 때는 버튼으로 읽히는지 확인하세요.

Badge

Manual Installation

의존성 설치

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

목차