Chip

import { Chip } from '@peppermint-design/devreadykit';

export default function App() {
  return (
    <Chip variant="filled" color="brand">
      Default Chip
    </Chip>
  );
}

<Chip variant="filled" color="brand">Brand</Chip>
<Chip variant="filled" color="danger">Danger</Chip>
<Chip variant="filled" color="warning">Warning</Chip>
<Chip variant="filled" color="success">Success</Chip>
<Chip variant="filled" color="important">Important</Chip>

<Chip variant="tint" color="brand">Brand</Chip>
<Chip variant="tint" color="danger">Danger</Chip>
<Chip variant="tint" color="warning">Warning</Chip>
<Chip variant="tint" color="success">Success</Chip>
<Chip variant="tint" color="important">Important</Chip>

<Chip variant="outline" color="brand">Brand</Chip>
<Chip variant="outline" color="danger">Danger</Chip>
<Chip variant="outline" color="warning">Warning</Chip>
<Chip variant="outline" color="success">Success</Chip>
<Chip variant="outline" color="important">Important</Chip>

import { Check } from '@/assets/icons/check';
import { Warning } from '@/assets/icons/warning';
import { Close } from '@/assets/icons/close';

const InfoIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10" />
    <line x1="12" y1="16" x2="12" y2="12" />
    <circle cx="12" cy="8" r="1" />
  </svg>
);

<Chip variant="filled" color="success" icon={<Check />}>
  Verified
</Chip>

<Chip variant="tint" color="warning" icon={<Warning />}>
  Pending
</Chip>

<Chip variant="outline" color="danger" icon={<Close />}>
  Failed
</Chip>

<Chip variant="filled" color="brand" icon={<InfoIcon />}>
  Information
</Chip>

import { Close } from '@/assets/icons/close';

function FilterChips({ filters, onRemove }) {
  return (
    <div className="flex flex-wrap gap-2">
      {filters.map(filter => (
        <Chip 
          key={filter.key}
          variant="filled" 
          color="brand"
          icon={<X />}
          onClick={() => onRemove(filter.key)}
        >
          {filter.label}
        </Chip>
      ))}
    </div>
  );
}