Chip

<span class="chip">Default</span>
<span class="chip chip-filled color-primary">Primary</span>
<span class="chip chip-filled color-success">Success</span>
<span class="chip chip-filled color-error">Error</span>

Requires: ux.min.css

<span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-base-200 text-base-content">Default</span>
<span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-primary text-primary-content">Primary</span>
<span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-success text-success-content">Success</span>
<span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-error text-error-content">Error</span>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<span class="chip">Default</span>
<span class="chip chip-outline">Outline</span>
<span class="chip chip-soft color-primary">Soft</span>
<span class="chip chip-filled color-primary">Filled</span>

Requires: ux.min.css

<span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-base-200 text-base-content">Default</span>
<span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-transparent text-base-content border border-base-300">Outline</span>
<span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-primary/15 text-primary">Soft</span>
<span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-primary text-primary-content">Filled</span>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<span class="chip chip-sm chip-filled color-primary">Small</span>
<span class="chip chip-filled color-primary">Default</span>
<span class="chip chip-lg chip-filled color-primary">Large</span>

Requires: ux.min.css

<span class="inline-flex items-center gap-1 h-6 px-2.5 text-xs font-medium rounded-full bg-primary text-primary-content">Small</span>
<span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-primary text-primary-content">Default</span>
<span class="inline-flex items-center gap-1 h-10 px-4 text-base font-medium rounded-full bg-primary text-primary-content">Large</span>

Requires: tw.min.css

// No JavaScript required - pure CSS component

<span class="chip chip-filled color-primary">
  React
  <button class="chip-close">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>
  </button>
</span>
<span class="chip chip-filled color-success">
  Vue
  <button class="chip-close">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>
  </button>
</span>

Requires: ux.min.css

<span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-primary text-primary-content">
  React
  <button class="inline-flex items-center justify-center size-4.5 p-0 border-none rounded-full cursor-pointer bg-white/20 hover:bg-white/30 -mr-1.5">
    <svg class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>
  </button>
</span>

Requires: tw.min.css

// Click handler for chip removal:
document.querySelectorAll('.chip-close').forEach(btn => {
  btn.addEventListener('click', () => btn.closest('.chip').remove());
});

<div class="chip-group">
  <span class="chip chip-interactive chip-soft color-primary">JavaScript</span>
  <span class="chip chip-interactive chip-soft color-success">Python</span>
  <span class="chip chip-interactive chip-soft color-warning">Rust</span>
  <span class="chip chip-interactive chip-soft color-error">Go</span>
  <span class="chip chip-interactive chip-soft color-info">TypeScript</span>
</div>

Requires: ux.min.css

<div class="flex flex-wrap gap-2">
  <span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-primary/15 text-primary cursor-pointer">JavaScript</span>
  <span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-success/15 text-success cursor-pointer">Python</span>
  <span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-warning/15 text-warning cursor-pointer">Rust</span>
  <span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-error/15 text-error cursor-pointer">Go</span>
  <span class="inline-flex items-center gap-1 h-8 px-3.5 text-sm font-medium rounded-full bg-info/15 text-info cursor-pointer">TypeScript</span>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component