Badge

객체의 속성이나 상태를 시각적으로 표현하는 작은 텍스트 라벨입니다. 사용자의 주의를 끌고 콘텐츠의 빠른 인지와 탐색을 돕기 위해 사용됩니다.

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

라벨

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/react-monochrome-icon @seed-design/react

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

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

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

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

/**
 * @file ui:badge
 * @requires @karrotmarket/react-monochrome-icon@^1.17.0
 * @requires @seed-design/react@^3.0.0
 * @requires @seed-design/css@^3.0.0
 **/

"use client";

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

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

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

export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
  ({ children, prefix, actionProps, ...props }, ref) => {
    let actionElement: React.ReactElement | null = null;
    let renderAction: BadgeActionProps["render"];

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

    return (
      <SeedBadge.Root ref={ref} {...props}>
        {prefix != null ? (
          <SeedBadge.Prefix>
            <Icon size="full" svg={prefix} />
          </SeedBadge.Prefix>
        ) : null}
        <SeedBadge.Label>{children}</SeedBadge.Label>
        {actionElement ? (renderAction ? renderAction(actionElement) : actionElement) : null}
      </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.ReactNode

actionProps?BadgeActionProps | undefined

Usage

"use client";

import { Badge } from "seed-design/ui/badge";

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

Prefix and Action

prefix에는 Label 앞에 표시할 아이콘 요소를 전달합니다.

관심 등록

"use client";

import { IconHeartFill } from "@karrotmarket/react-monochrome-icon";
import { Badge } from "seed-design/ui/badge";

export default function BadgePrefix() {
  return <Badge prefix={<IconHeartFill />}>관심 등록</Badge>;
}

정보 아이콘에는 안내의 양과 사용자가 해야 할 일에 맞는 UI를 연결하세요. 짧은 설명에는 action.render로 Help Bubble을 연결할 수 있습니다.

판매 완료

"use client";

import { HelpBubbleTooltipTrigger } from "seed-design/ui/help-bubble-tooltip";
import { Badge } from "seed-design/ui/badge";

export default function BadgeWithAction() {
  return (
    <Badge
      actionProps={{
        "aria-label": "도움말",
        render: (trigger) => (
          <HelpBubbleTooltipTrigger title="판매 완료된 상품이에요">
            {trigger}
          </HelpBubbleTooltipTrigger>
        ),
      }}
    >
      판매 완료
    </Badge>
  );
}

설명이 길거나 사용자의 확인이 필요하면 Bottom Sheet를 연결할 수 있습니다. 다음 예시는 부동산 게시글의 집주인 Badge에서 집주인 인증에 관한 설명을 제공합니다.

집주인

"use client";

import { useState } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import { Badge } from "seed-design/ui/badge";
import {
  BottomSheetBody,
  BottomSheetContent,
  BottomSheetFooter,
  BottomSheetRoot,
  BottomSheetTrigger,
} from "seed-design/ui/bottom-sheet";

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

  return (
    <BottomSheetRoot open={open} onOpenChange={setOpen}>
      <Badge
        actionProps={{
          "aria-label": "집주인 인증 안내",
          render: (trigger) => <BottomSheetTrigger asChild>{trigger}</BottomSheetTrigger>,
        }}
      >
        집주인
      </Badge>
      <BottomSheetContent
        title="집주인 인증 매물"
        description="집주인이 직접 등록한 매물에 표시돼요."
      >
        <BottomSheetBody>
          매물을 올린 사람이 집주인임을 확인할 수 있어, 중개소에서 등록한 매물과 구분할 수 있어요.
        </BottomSheetBody>
        <BottomSheetFooter>
          <ActionButton variant="brandSolid" onClick={() => setOpen(false)}>
            확인
          </ActionButton>
        </BottomSheetFooter>
      </BottomSheetContent>
    </BottomSheetRoot>
  );
}

Examples

Truncating Behavior

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

In velit velit deserunt amet veniam incididunt consectetur incididunt Lorem.

"use client";

import { Badge } from "seed-design/ui/badge";

export default function BadgeTruncating() {
  return (
    <Badge style={{ maxWidth: "120px" }}>
      In velit velit deserunt amet veniam incididunt consectetur incididunt Lorem.
    </Badge>
  );
}

Tones and Variants

Neutral

라벨라벨라벨

"use client";

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

export default function BadgeNeutral() {
  return (
    <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>
  );
}

Brand

라벨라벨라벨

"use client";

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

export default function BadgeBrand() {
  return (
    <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>
  );
}

Informative

라벨라벨라벨

"use client";

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

export default function BadgeInformative() {
  return (
    <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>
  );
}

Positive

라벨라벨라벨

"use client";

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

export default function BadgePositive() {
  return (
    <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>
  );
}

Warning

라벨라벨라벨

"use client";

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

export default function BadgeWarning() {
  return (
    <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>
  );
}

Critical

라벨라벨라벨

"use client";

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

export default function BadgeCritical() {
  return (
    <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>
  );
}

Badge

Manual Installation

의존성 설치

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

목차