Chip

import { Chip } from '@kivora/react';

<Chip>React</Chip>

<Chip>JavaScript</Chip>

function ChipExample() {
  const [selected, setSelected] = useState(false);

  return (
    <Chip 
      checked={selected} 
      onClick={() => setSelected(!selected)}
    >
      Featured
    </Chip>
  );
}

function FilterChips() {
  const [filters, setFilters] = useState({
    react: false,
    vue: false,
    angular: false,
  });

  return (
    <div className="flex gap-2">
      <Chip 
        checked={filters.react}
        onClick={() => setFilters({ ...filters, react: !filters.react })}
      >
        React
      </Chip>
      <Chip 
        checked={filters.vue}
        onClick={() => setFilters({ ...filters, vue: !filters.vue })}
      >
        Vue
      </Chip>
      <Chip 
        checked={filters.angular}
        onClick={() => setFilters({ ...filters, angular: !filters.angular })}
      >
        Angular
      </Chip>
    </div>
  );
}

<Chip readOnly>Non-interactive</Chip>

<Chip checked={true}>
  <Icon name="check" size={14} />
  Verified
</Chip>

function ProductFilters() {
  const [filters, setFilters] = useState({
    inStock: false,
    onSale: false,
    featured: false,
  });

  const toggleFilter = (key: string) => {
    setFilters({ ...filters, [key]: !filters[key] });
  };

  return (
    <div className="space-y-2">
      <h3>Filters</h3>
      <div className="flex flex-wrap gap-2">
        <Chip 
          checked={filters.inStock}
          onClick={() => toggleFilter('inStock')}
          variant="success"
        >
          In Stock
        </Chip>
        <Chip 
          checked={filters.onSale}
          onClick={() => toggleFilter('onSale')}
          variant="warning"
        >
          On Sale
        </Chip>
        <Chip 
          checked={filters.featured}
          onClick={() => toggleFilter('featured')}
          variant="info"
        >
          Featured
        </Chip>
      </div>
    </div>
  );
}