Chips

---
import { Check } from 'lucide-react';
---

<div class="flex items-center gap-4">
  <button type="button" class="chip-icon preset-filled">
    <Check size={16} />
  </button>
  <button type="button" class="chip preset-filled">Chip</button>
  <button type="button" class="chip preset-filled">
    <span>Chip</span>
    <Check size={16} />
  </button>
</div>

<div class="space-y-4">
  <div class="flex gap-4">
    <button type="button" class="chip preset-filled-primary-500">Chip</button>
    <button type="button" class="chip preset-tonal-primary">Chip</button>
    <button type="button" class="chip preset-outlined-primary-500">Chip</button>
  </div>
  <div class="flex gap-4">
    <button type="button" class="chip preset-filled-secondary-500">Chip</button>
    <button type="button" class="chip preset-tonal-secondary">Chip</button>
    <button type="button" class="chip preset-outlined-secondary-500">Chip</button>
  </div>
  <div class="flex gap-4">
    <button type="button" class="chip preset-filled-tertiary-500">Chip</button>
    <button type="button" class="chip preset-tonal-tertiary">Chip</button>
    <button type="button" class="chip preset-outlined-tertiary-500">Chip</button>
  </div>
  <div class="flex gap-4">
    <button type="button" class="chip preset-filled-success-500">Chip</button>
    <button type="button" class="chip preset-tonal-success">Chip</button>
    <button type="button" class="chip preset-outlined-success-500">Chip</button>
  </div>
  <div class="flex gap-4">
    <button type="button" class="chip preset-filled-warning-500">Chip</button>
    <button type="button" class="chip preset-tonal-warning">Chip</button>
    <button type="button" class="chip preset-outlined-warning-500">Chip</button>
  </div>
  <div class="flex gap-4">
    <button type="button" class="chip preset-filled-error-500">Chip</button>
    <button type="button" class="chip preset-tonal-error">Chip</button>
    <button type="button" class="chip preset-outlined-error-500">Chip</button>
  </div>
  <div class="flex gap-4">
    <button type="button" class="chip preset-filled-surface-500">Chip</button>
    <button type="button" class="chip preset-tonal-surface">Chip</button>
    <button type="button" class="chip preset-outlined-surface-500">Chip</button>
  </div>
</div>

<button type="button" class="chip preset-filled" disabled>Chip</button>

import React, { useState } from 'react';

export const Page: React.FC = () => {
  // The default color state
  const [color, setColor] = useState('red');
  // The available set of colors
  const colors = ['red', 'blue', 'green'];

  return (
    <div className="flex gap-2">
      {/* Loop through the available colors */}
      {color &&
        colors.map((c) => (
          // On selection, set the color state, dynamically update classes
          <button className={`chip capitalize ${color === c ? 'preset-filled' : 'preset-tonal'}`} onClick={() => setColor(c)} key={c}>
            <span>{c}</span>
          </button>
        ))}
    </div>
  );
};