Chip

A small label/tag component with optional remove functionality. Uses the ClearButton component internally for the dismiss action.

Import

import { Chip } from "chunks-ui";

Basic Usage

<Chip>Default</Chip>

Colors

<Chip color="primary">Primary</Chip>
<Chip color="destructive">Destructive</Chip>
<Chip color="success">Success</Chip>
<Chip color="warning">Warning</Chip>
<Chip color="secondary">Secondary</Chip>

Each color applies a light tinted background with matching text and border (e.g. bg-primary/10 text-primary-text border-primary/30).

Variants

The variant prop controls the fill style:

<Chip variant="contained" color="primary">Contained</Chip>
<Chip variant="outlined" color="primary">Outlined</Chip>

The outlined variant removes the background fill, keeping only the border and text color.

Removable Chip

Pass an onRemove callback to show a close button:

function TagList() {
  const [tags, setTags] = useState(["React", "TypeScript", "Tailwind"]);
 
  return (
    <div className="flex gap-2">
      {tags.map((tag) => (
        <Chip
          key={tag}
          onRemove={() => setTags((prev) => prev.filter((t) => t !== tag))}
        >
          {tag}
        </Chip>
      ))}
    </div>
  );
}

The remove button reads its label and then the chip’s text, for example “Remove React”. To put the chip’s text first, mark its place with {chip}: labels={{ remove: "{chip} を削除" }} reads “React を削除”. See Labels.

Props

All other props are forwarded to the underlying <span> element.

Labels

labels replaces the built-in English text, for example to translate it. Keys you leave out keep their default from DEFAULT_CHIP_LABELS. See Labels.