component

TuxRemovableChip

Interactive dismissible pill primitive. Distinct from TuxBadge (decorative): this is button-shaped, focusable, and emits events. Use for applied-filter chips, tag-input pills, recipient lists, selected-corpus indicators. Three sizes, optional leading icon, selected fills with brand color, removable shows an × (or clickToRemove makes the whole pill the hit target).

basic

With remove button

Pass removable to show a separate × button at the right. Clicking the × emits @remove; the rest of the pill is non-interactive.

Filter labelWith iconLarge
<tux-removable-chip removable @remove="onRemove">
  Filter label
</tux-removable-chip>

click-to-remove

Whole-pill click removes

Pass click-to-remove for the applied-filter pattern: the × renders as a decorative glyph and the whole pill is the click target. Used inside TuxFilterPanel for applied-filter chips.

tier:ITARtier:Restrictedowner:R. Chen
<tux-removable-chip
  v-for="f in filters"
  :key="f.label"
  size="sm"
  removable
  click-to-remove
  @remove="dropFilter(f.label)"
>
  <span class="text-text-muted">{{ f.facet }}:</span>
  <strong class="ml-1">{{ f.label }}</strong>
</tux-removable-chip>

selected state

Selected vs default

selected fills with brand color — useful for toggle-style chips (a facet that's currently applied vs. one that isn't).

Active filterInactive filterActive + removable
<tux-removable-chip selected icon="lucide:filter">
  Active filter
</tux-removable-chip>
<tux-removable-chip icon="lucide:filter">
  Inactive filter
</tux-removable-chip>