v1.0.8

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>

Guidelines

Selectable or removable token: filters, tag inputs, interest pickers (vt-chip-active for selected). NOT for pure read-only status → badge.

Do
Mark the selected filter with vt-chip-active.
Complete Pending
Don't
Don't use chips for read-only status — use a badge.
Design
Do
Give removable chips a labeled trailing remove control.
Design
Don't
Don't place the remove control before the chip label.

API Reference

All CSS classes and data attributes.

Class Type Description
vt-chip Base Selectable token — rounded, bordered, hover state
vt-chip-active State Selected chip — brand-tinted fill and border
data-selected Data Selection state hook toggled by the JS bundle

Accessibility

Keyboard and screen reader support.

Feature Details
Element Use button for toggleable chips so they are focusable and keyboard-operable
State Toggle chips expose aria-pressed matching the selected state
Removal Removable chips need an aria-label on the remove control, e.g. "Remove Design"