Chips

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

<div class="flex items-center gap-4">
  <!-- A simple icon chip -->
  <button type="button" class="chip-icon preset-filled">
    <Check size={16} />
  </button>
  <!-- A standard chip -->
  <button type="button" class="chip preset-filled">Chip</button>
  <!-- A chip + icon -->
  <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 = () => {
  const colors = ['red', 'blue', 'green'];
  const [color, setColor] = useState(colors[0]);

  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>
  );
};

<script lang="ts">
  const colors = ['red', 'blue', 'green'];
  let color = $state(colors[0]);

  function setColor(selectedColor: string) {
    color = selectedColor;
  }
</script>

<div class="flex gap-2">
  <!-- Loop through the available colors -->
  {#each colors as c}
    <!-- On selection, set the color state, dynamically update classes -->
    <button class={`chip capitalize ${color === c ? 'preset-filled' : 'preset-tonal'}`} onclick={() => setColor(c)}>
      <span>{c}</span>
    </button>
  {/each}
</div>