Tag

카테고리나 키워드를 표시하는 태그 컴포넌트입니다. 간결하게 정보를 분류하거나 라벨링할 때 사용합니다.

Preview

Default

Blue

Red

Clickable

Usage

설치

Terminal

$ pnpm add @b1nd/dodam-design-system/components

@b1nd/dodam-design-system/components 패키지는 @dds-web의 iconography, typography, colors, shapes, themes 패키지에 의존합니다. 프로젝트에 해당 패키지들이 설치되어 있지 않다면, 함께 설치해주세요.

기본 사용법

tsx

import { Tag } from "@b1nd/dodam-design-system/components";

const Example = () => {
  return <Tag text="Label" />;
};

export default Example;

색상 지정

color prop을 사용하여 태그의 색상을 지정할 수 있습니다.

tsx

import { Tag } from "@b1nd/dodam-design-system/components";

const Example = () => {
  return (
    <div className="flex gap-2">
      <Tag text="Default" color="default" />
      <Tag text="Blue" color="blue" />
      <Tag text="Red" color="red" />
    </div>
  );
};

export default Example;

클릭 이벤트

onClick prop을 사용하여 태그에 클릭 이벤트를 추가할 수 있습니다.

tsx

"use client";

import { Tag } from "@b1nd/dodam-design-system/components";

const Example = () => {
  const handleClick = () => {
    alert("Tag clicked!");
  };

  return <Tag text="Clickable" color="blue" onClick={handleClick} />;
};

export default Example;

Props

Prop	Type	Default	Description
`text`	`string`	`-`	태그에 표시할 텍스트
`color`	`"default" \| "blue" \| "red"`	`"default"`	태그의 색상 스타일
`onClick`	`MouseEventHandler`	`-`	태그 클릭 시 실행될 이벤트 핸들러

색상 가이드

Default

기본 스타일로, 일반적인 라벨이나 카테고리에 사용합니다.

Blue

브랜드 컬러를 사용하며, 강조가 필요한 태그에 사용합니다.

Red

에러나 경고, 중요한 상태를 나타낼 때 사용합니다.

Best Practices

태그는 간결하고 명확한 텍스트를 사용하세요.
너무 많은 태그를 한 번에 표시하지 않도록 주의하세요.
클릭 가능한 태그는 명확한 피드백을 제공해야 합니다.
색상은 일관성 있게 사용하여 사용자에게 혼란을 주지 않도록 하세요.

Accessibility

클릭 가능한 태그는 호버 시 시각적 피드백을 제공합니다.
적절한 커서 스타일로 상호작용 가능 여부를 표시합니다.
충분한 대비를 제공하여 접근성을 보장합니다.