Chip
Installation
Install the following dependencies
npm install lucide-react
Copy and paste the following code into your project
primitives/chip/index.tsx
import { X } from 'lucide-react';interface Props { name?: string; value?: string; children?: React.ReactNode; removeLabel?: string; onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;}export const Chip = function Chip({ name, value, children, removeLabel = 'Remove', onClick,}: Props) { return ( <span className="flex h-9 items-center gap-1.5 rounded-lg bg-contrast-100 py-2 pe-2 ps-3 text-sm font-semibold leading-5 text-foreground"> {children} <button className="flex h-5 w-5 items-center justify-center rounded-full hover:bg-contrast-200 focus:outline-none focus:ring-1 focus:ring-foreground" name={name} onClick={onClick} title={removeLabel} value={value} > <X size={12} /> </button> </span> );};