Chip

Chip은 정보 표시, 태그 설정, 필터 선택 등을 위한 작고 둥근 인터페이스 요소입니다.

• 다양한 스타일 변형과 크기를 지원합니다
• 아이콘과 텍스트 조합 또는 아이콘만 사용할 수 있습니다
• 버튼처럼 클릭 가능한 요소로 구현됩니다

Installation

npx @jongh/cli add chip

Usage

Chip 컴포넌트는 클릭 가능한 태그나 필터를 표시하는 데 사용됩니다.

Props

• variant ("filled" | "outlined"): 칩의 스타일 변형을 지정합니다. 기본값은 "filled"입니다.
• size ("sm" | "md"): 칩의 크기를 지정합니다. 기본값은 "md"입니다.
• layout ("withText" | "iconOnly"): 텍스트 포함 여부를 지정합니다. 기본값은 "withText"입니다.
• asChild (boolean): Radix UI의 Slot 패턴을 사용하여 다른 요소로 렌더링할지 여부를 지정합니다. 기본값은 false입니다.

기본 button 요소의 모든 속성(onClick, disabled 등)도 지원합니다.

Variant

Chip 컴포넌트는 다음 변형을 지원합니다:

• filled: 색상이 채워진 배경을 가진 칩입니다.
• outlined: 테두리만 있는 칩입니다.

Size

Chip 컴포넌트는 두 가지 크기를 지원합니다:

• sm: 작은 크기의 칩입니다.
• md: 중간 크기의 칩입니다.

Layout

Chip 컴포넌트는 다음 레이아웃을 지원합니다:

• withText: 텍스트와 아이콘을 함께 표시할 수 있습니다.
• iconOnly: 아이콘만 표시하며, 정사각형 형태가 됩니다.

Accessibility

Chip 컴포넌트는 기본적으로 button 요소를 기반으로 하여 다음과 같은 접근성 기능을 제공합니다:

• 키보드 접근성: Enter 또는 Space 키로 활성화할 수 있습니다.
• 적절한 role="button" 설정이 되어 있습니다.
• 아이콘만 사용할 경우 적절한 aria-label을 제공해야 합니다.

Example

기본 사용 예시

import { Chip } from "@/components/chip"
import { CheckIcon } from "lucide-react"

const ChipExample = () => (
  <div>
    <Chip onClick={() => console.log("clicked")}>확인</Chip>
    <Chip variant="outlined">선택</Chip>
    <Chip disabled>비활성화</Chip>
  </div>
)

아이콘 사용 예시

import { Chip } from "@/components/chip"
import { PlusCircleIcon, CheckIcon } from "lucide-react"

const ChipWithIconExample = () => (
  <div>
    {/* 아이콘만 사용하는 예시 */}
    <Chip layout="iconOnly" aria-label="추가">
      <PlusCircleIcon />
    </Chip>

    {/* 접두 아이콘과 함께 사용하는 예시 */}
    <Chip>
      <CheckIcon />
      완료
    </Chip>

    {/* 접미 아이콘과 함께 사용하는 예시 */}
    <Chip>
      선택됨
      <CheckIcon />
    </Chip>
  </div>
)

크기 변형 예시

import { Chip } from "@/components/chip"

const ChipSizeExample = () => (
  <div>
    <Chip size="md">중간 크기</Chip>
    <Chip size="sm">작은 크기</Chip>
  </div>
)