Chip

Usage

Chip shares its color/variant/size system - and its default shape - with Badge. The difference is removable, which adds a dismiss button and a remove event. Chip doesn't track its own value; the parent decides what "remove" means (splice it out of an array, unset a filter, whatever fits).

<SChip label="Primary" color="primary" />
<SChip label="Solid" color="primary" variant="solid" />
<SChip label="Outline" color="danger" variant="outline" />

Removable

removable adds a dismiss button; listen for @remove to react to it.

<SChip
  v-for="fruit in fruits"
  :key="fruit"
  :label="fruit"
  removable
  @remove="fruits = fruits.filter((f) => f !== fruit)"
/>

Icon

icon adds a leading icon, and combines with removable freely - the matching icon slot replaces the glyph entirely when a plain icon name isn't enough.

<SChip label="Verified" icon="hugeicons:tick-02" color="success" />
<SChip label="Starred" icon="hugeicons:star" color="warning" removable />

Rounded

rounded swaps the default small radius for a fully rounded pill shape.

<SChip label="Primary" color="primary" rounded />
<SChip label="Removable" removable rounded @remove="() => {}" />

Accessibility

The remove button is icon-only, so it needs an accessible name from somewhere: by default it's derived as Remove {label} (or plain Remove without a label) - override it directly with removeLabel when the default slot's content isn't plain text label can describe.

Chip's own root is a <span>, so the remove button renders as a real <button> inside it - nothing unusual to work around there, unlike a control that has to live inside another interactive element.

Custom :ui

To see exactly what you'd be overriding - the current default classes for every slot and variant - here's Chip's own theme file:

Props

Slots

Emits