Chip

Interactive, compact elements for filtering, selections, and tag management.

Default

Basic chips in different states.

html
Default Selected Removable Disabled 
<span class="uc-chip">Default</span>
<span class="uc-chip uc-chip-selected">Selected</span>
<span class="uc-chip">
  Label
  <button><svg><!-- X --></svg></button>
</span>

Filter Chips

Toggleable chips for filtering content.

html 
<div class="uc-flex uc-flex-wrap uc-gap-2">
  <button class="uc-chip uc-chip-selected">All</button>
  <button class="uc-chip">Design</button>
  <button class="uc-chip">Development</button>
  <button class="uc-chip">Marketing</button>
</div>

With Icons

Chips with leading icons for additional context.

html
Featured Recent v2.0 John Doe 
<span class="uc-chip">Default</span>
<span class="uc-chip uc-chip-selected">Selected</span>
<span class="uc-chip">
  Label
  <button><svg><!-- X --></svg></button>
</span>

Sizes

Chips in small, default, and large sizes.

html
Small Default Large 
<span class="uc-chip">Default</span>
<span class="uc-chip uc-chip-selected">Selected</span>
<span class="uc-chip">
  Label
  <button><svg><!-- X --></svg></button>
</span>

Input Chips

Chips inside an input field for multi-value entry.

html
React TypeScript Astro 
<div class="uc-flex uc-flex-wrap uc-items-center uc-gap-2 uc-p-2 uc-rounded-lg uc-border">
  <span class="uc-chip">React <button>x</button></span>
  <span class="uc-chip">Vue <button>x</button></span>
  <input placeholder="Add..." />
</div>

Colored

Chips with semantic color variants.

html
In Progress Complete Pending Failed 
<span class="uc-chip">Default</span>
<span class="uc-chip uc-chip-selected">Selected</span>
<span class="uc-chip">
  Label
  <button><svg><!-- X --></svg></button>
</span>