Chip

작은 토큰입니다. 태그, 필터, 상태, 목록에서 뽑아낸 항목 하나.

import { Chip } from 'neba';

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

Props

Prop	타입	기본값	설명
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	'Remove'	삭제 버튼의 접근성 이름
selected	boolean	false	선택됨. 색 계열을 바꾸는 대신 표면을 한 단계 깊게 만듭니다
disabled	boolean	false	사용 불가
children	ReactNode	—	칩의 라벨

예시

Variant와 색

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>
  );
}

아이콘과 숫자

count는 자기 판 위에 그려지므로 "오류 12"가 두 단어가 아니라 숫자가 붙은 토큰 하나로 읽힙니다. 채워진 칩에서 그 판은 채움에 뚫린 구멍이고, 옅게 물든 칩이나 맨 칩에서는 accent가 비쳐 나오는 것입니다.

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>
  );
}

누를 수 있는 칩, 지울 수 있는 칩

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>
  );
}

크기

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>
  );
}

칩은 사다리에서 한 칸 아래입니다

md 칩은 sm 컨트롤입니다 — 32px이 아니라 26px. 이것이 Chip과 Button의 시각적 차이 전부이고, 의도된 것입니다. 칩은 행이 기준으로 삼는 컨트롤이 아니라 콘텐츠 행 안에 놓인 토큰입니다. 컨트롤과 같은 높이가 되면 outline 칩과 outline 버튼은 같은 물건이 되고, 그런 화면은 어느 쪽을 누를 수 있는지 아무것도 말해 주지 않습니다.

다른 라이브러리들은 이 구분을 알약 반경으로 만들지만 이 라이브러리는 그럴 수 없습니다. 시트 위아래 가장자리의 평평한 구간이야말로 디자인 언어 전체의 요점이기 때문입니다.

접근성

셸은 언제나 <span>입니다. 바뀌는 것은 그 안입니다. 그냥 내용이 들어가거나, onClick이 주어지면 그 내용을 감싼 진짜 <button>이 들어가고, onDelete가 있으면 두 번째 버튼이 나란히 놓입니다.

둘 다 키보드로 닿을 수 있고, 어느 쪽도 다른 쪽 안에 중첩되지 않습니다. 클릭 핸들러만 달린 <span>은 컴포넌트 라이브러리가 키보드 사용자를 잃는 가장 흔한 방법이고, <button> 안의 <button>은 브라우저가 조용히 고쳐 쓰는 마크업을 만들어 내는 가장 흔한 방법입니다. 이 구조는 둘 다 피합니다.

화면에 칩이 여러 개라면 삭제 버튼에 무엇을 지우는지 밝히는 deleteLabel을 주세요.