Chip

A compact token holding one short value: a tag, a filter, a status. It can also be made clickable or deletable.

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
locale	string	—	BCP 47 tag naming the delete button in that language
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	—	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
transitionshared	NebaTransition	—	An entrance animation, run once on mount (transition="zoom"). Wrap it in an Animate* component for a trigger or a replay

Chip's size sits one step below the control heights: an md Chip is 26px, the same height as a sm Button. That separates a token placed inside content from a control the row lines up against.

Examples

variant and 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 and endIcon are nodes placed before and after the label. count gets its own plate, so "Errors 12" reads as one token with a number on it rather than as two words.

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 makes the whole chip a pressable control. onDelete adds a delete button after the label. selected marks the chip as on by deepening the surface one step rather than changing the colour family.

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

Accessibility

• The shell is always a <span>. onClick adds a <button> around the content; onDelete adds a second <button> beside it. Neither is nested inside the other, so both are reachable by keyboard.
• With more than one chip on screen, give the delete button a deleteLabel naming what is being removed: the default label leaves them indistinguishable.
• locale decides the delete button's accessible name; deleteLabel writes it out instead.