Chip

태그, 필터, 상태처럼 짧은 값 하나를 담는 작은 토큰입니다. 누르거나 지울 수 있게 만들 수도 있습니다.

import { Chip } from 'neba';

<Chip>design-system</Chip>
<Chip color="danger" count={12}>오류</Chip>
<Chip onDelete={remove}>typescript</Chip>;

Props

Prop	타입	기본값	설명
locale	string	—	BCP 47 태그. 삭제 버튼의 접근성 이름을 이 언어로 씁니다
variant공통	'solid' | 'outline' | 'text'	'outline'	표면의 무게. 채움 / 하이라인 / 없음
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	높이와 타입 스케일. 같은 size의 컨트롤보다 한 단계 낮습니다. md 칩은 sm 컨트롤입니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	의미론적 색 역할. 임의 색상값은 받지 않습니다
density공통	'default' | 'compact'	'default'	여백만 바꿉니다. 높이와 글자 크기는 그대로
elevation공통	0 | 1 | 2 | 3	0	그림자 깊이. 칩은 다른 것 위에 얹힌 토큰이라 거의 올리지 않습니다
startIcon	ReactNode	—	라벨 앞에 놓이는 내용, 아이콘, 상태 점, 아바타
endIcon	ReactNode	—	라벨 뒤, count 앞에 놓이는 내용
count	ReactNode	—	끝에 붙는 숫자. 자기 판 위에 그려져 칩 하나로 읽힙니다
onClick	(event) => void	—	넘기면 라벨이 진짜 button이 됩니다
onDelete	(event) => void	—	넘기면 삭제 버튼이 나타납니다. onClick과 별개의 버튼입니다
deleteLabel	string	—	삭제 버튼의 접근성 이름
selected	boolean	false	선택됨. 색 계열을 바꾸는 대신 표면을 한 단계 깊게 만듭니다
disabled	boolean	false	사용 불가
children	ReactNode	—	칩의 라벨
transition공통	NebaTransition	—	mount 시 한 번 실행되는 등장 애니메이션 (transition="zoom"). 트리거나 반복이 필요하면 Animate* 컴포넌트로 감싸세요

Chip의 size는 컨트롤 높이보다 한 단계 아래입니다. md Chip은 26px로, Button의 sm과 같은 높이입니다. 콘텐츠 안에 놓이는 토큰과 행의 기준이 되는 컨트롤을 구분하기 위한 것입니다.

예시

variant와 color

import { Chip } from 'neba';

const COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;

export default function ChipVariants() {
  return (
    <div className="flex flex-col gap-3">
      {(['solid', 'outline', 'text'] as const).map((variant) => (
        <div key={variant} className="flex flex-wrap items-center gap-2">
          {COLORS.map((color) => (
            <Chip key={color} variant={variant} color={color}>
              {color}
            </Chip>
          ))}
        </div>
      ))}
    </div>
  );
}

startIcon · endIcon · count

startIcon과 endIcon은 라벨 앞뒤에 놓이는 node입니다. count는 별도의 plate 위에 그려져서, "오류 12"가 두 단어가 아니라 숫자가 붙은 토큰 하나로 읽힙니다.

import { Chip } from 'neba';

function BranchIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path
        d="M5 3v10M5 8h4a2 2 0 0 0 2-2V4"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
      <circle cx="5" cy="3" r="1.6" fill="currentColor" />
      <circle cx="11" cy="3" r="1.6" fill="currentColor" />
      <circle cx="5" cy="13" r="1.6" fill="currentColor" />
    </svg>
  );
}

export default function ChipContent() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Chip>Text only</Chip>
      <Chip startIcon={<BranchIcon />}>main</Chip>
      <Chip count={4}>Comments</Chip>
      <Chip variant="solid" color="danger" count={99}>
        Failing
      </Chip>
      <Chip startIcon={<BranchIcon />} count={2} color="info">
        release/1.2
      </Chip>
    </div>
  );
}

onClick · onDelete · selected

onClick을 주면 Chip 전체가 누를 수 있는 컨트롤이 됩니다. onDelete는 라벨 뒤에 삭제 버튼을 붙입니다. selected는 색 계열을 바꾸지 않고 표면을 한 단계 깊게 만들어 선택 상태를 표시합니다.

import { useState } from 'react';
import { Chip } from 'neba';

const ALL = ['bug', 'docs', 'good first issue', 'help wanted'];

export default function ChipInteractive() {
  const [selected, setSelected] = useState<string[]>(['bug']);
  const [tags, setTags] = useState(['react', 'tailwind', 'base-ui']);

  const toggle = (label: string) =>
    setSelected((current) =>
      current.includes(label) ? current.filter((item) => item !== label) : [...current, label]
    );

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center gap-2">
        {ALL.map((label) => (
          <Chip
            key={label}
            selected={selected.includes(label)}
            onClick={() => toggle(label)}
            deleteLabel={`Remove ${label}`}
          >
            {label}
          </Chip>
        ))}
      </div>

      <div className="flex flex-wrap items-center gap-2">
        {tags.map((tag) => (
          <Chip
            key={tag}
            variant="text"
            color="secondary"
            onDelete={() => setTags(tags.filter((item) => item !== tag))}
            deleteLabel={`Remove ${tag}`}
          >
            {tag}
          </Chip>
        ))}
        {tags.length === 0 ? (
          <span className="text-[0.75rem] text-[var(--neba-muted-fg)]">No tags left.</span>
        ) : null}
      </div>
    </div>
  );
}

size

import { Chip } from 'neba';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function ChipSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      {SIZES.map((size) => (
        <Chip key={size} size={size} count={9}>
          {size}
        </Chip>
      ))}
    </div>
  );
}

접근성

• 겉은 항상 <span>입니다. onClick을 주면 내용을 감싸는 <button>이 생기고, onDelete를 주면 그 옆에 두 번째 <button>이 놓입니다. 두 버튼은 중첩되지 않으므로 각각 키보드로 닿을 수 있습니다.
• 화면에 Chip이 여러 개일 때는 deleteLabel로 무엇을 지우는지 밝혀 주세요. 기본 라벨만으로는 삭제 버튼들이 서로 구분되지 않습니다.
• 삭제 버튼의 접근성 이름은 locale이 정합니다. deleteLabel로 직접 쓸 수도 있습니다.