Chip
Interactive, compact elements for filtering, selections, and tag management.
Default
Basic chips in different states.
html
Default
Selected
Removable
Disabled
<span class="vt-chip">Default</span>
<span class="vt-chip vt-chip-active">Selected</span>
<span class="vt-chip">
Label
<button><svg><!-- X --></svg></button>
</span>Filter Chips
Toggleable chips for filtering content.
html
<div class="vt-flex vt-flex-wrap vt-gap-2">
<button class="vt-chip vt-chip-active">All</button>
<button class="vt-chip">Design</button>
<button class="vt-chip">Development</button>
<button class="vt-chip">Marketing</button>
</div>With Icons
Chips with leading icons for additional context.
html
Featured
Recent
v2.0
John Doe
<span class="vt-chip">Default</span>
<span class="vt-chip vt-chip-active">Selected</span>
<span class="vt-chip">
Label
<button><svg><!-- X --></svg></button>
</span>Sizes
Chips in small, default, and large sizes.
html
Small
Default
Large
<span class="vt-chip">Default</span>
<span class="vt-chip vt-chip-active">Selected</span>
<span class="vt-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="vt-flex vt-flex-wrap vt-items-center vt-gap-2 vt-p-2 vt-rounded-lg vt-border">
<span class="vt-chip">React <button>x</button></span>
<span class="vt-chip">Vue <button>x</button></span>
<input placeholder="Add..." />
</div>Colored
Chips with semantic color variants.
html
In Progress
Complete
Pending
Failed
<span class="vt-chip">Default</span>
<span class="vt-chip vt-chip-active">Selected</span>
<span class="vt-chip">
Label
<button><svg><!-- X --></svg></button>
</span>