Chip

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

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

Installation

npx @jongh/cli add chip

Usage

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

Props

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

기본 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>
)