Chip

A compact token: a tag, a filter, a status, an entity plucked out of a list.

import { Chip } from 'neba';

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

Props

Prop	Type	Default	Description
variantshared	'solid' | 'outline' | 'text'	'outline'	Weight of the surface: filled, hairline, or none
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Height and type scale, one step below the control of the same size — a md chip is a sm control
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. Arbitrary colour values are not accepted
densityshared	'default' | 'compact'	'default'	Padding only — never the height, never the type scale
elevationshared	0 | 1 | 2 | 3	0	Drop shadow depth. A chip sits on something else, so this is rarely raised
startIcon	ReactNode	—	Content before the label — an icon, a status dot, an avatar
endIcon	ReactNode	—	Content after the label, before any count
count	ReactNode	—	A number set into the end, on its own small plate
onClick	(event) => void	—	Passing it turns the label into a real button
onDelete	(event) => void	—	Passing it adds the delete button — its own button, separate from onClick
deleteLabel	string	'Remove'	Accessible name of the delete button
selected	boolean	false	Chosen. Deepens the surface a step rather than changing the colour family
disabled	boolean	false	Unavailable
children	ReactNode	—	The chip's label

Examples

Variants and colours

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

Icons and counts

A count gets its own small plate, so "Errors 12" reads as one token with a number on it rather than as two words. On a filled chip the plate is a hole punched in the fill; on a tinted or bare one it is the accent showing through.

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

Clickable and deletable

selected deepens the surface one step rather than changing the colour family — a filter that is on is still the same filter.

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

Sizes

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

A chip is one step down the ladder

A md chip is a sm control — 26px, not 32px. That is the whole visual difference between a Chip and a Button, and it is deliberate: a chip is a token inside a row of content, not a control the row lines up against. At full control height an outline chip and an outline button are the same object, and a screen full of them says nothing about which one can be pressed.

Every other library reaches for a pill radius to make that distinction, which this one cannot — the flat run along a sheet's top and bottom edge is the point of the whole design language.

Accessibility

The shell is always a <span>. What changes is what is inside it: a plain run of content, or — when onClick is given — a real <button> wrapping that content, plus a second button for onDelete.

Both are reachable by keyboard and neither is nested inside the other. An inert <span> carrying a click handler is the most common way a component library loses its keyboard users; a <button> inside a <button> is the most common way it invents markup the browser silently rewrites. This shape avoids both.

Give the delete button a deleteLabel naming what is being removed when there is more than one chip on screen.