Chip

An interactive pill — a filter/choice token, a removable tag, or a clickable label. The interactive counterpart to Badge (display-only): a Chip can be clicked, hold a selected state, and/or be removable. Shared variant/size axes, --ui-* tokens.

Filter / choice (selected)

selected fills with the variant; the consumer owns which is on. Active: Active.

All Active Archived Draft

<script>
  import { Chip } from '@spaethtech/svelte-ui';
  const FILTERS = ['All', 'Active', 'Archived', 'Draft'];
  let active = $state('Active');
</script>

{#each FILTERS as f}
  <Chip text={f} selected={active === f} variant="primary" onclick={() => (active = f)} />
{/each}

Removable tags

The × fires onremove (without triggering the chip's own click). Backspace/Delete on a focused chip also removes.

design svelte ui tokens

<script>
  import { Chip } from '@spaethtech/svelte-ui';
  let tags = $state(['design', 'svelte', 'ui']);
  const remove = (t) => (tags = tags.filter((x) => x !== t));
</script>

{#each tags as t}
  <Chip text={t} removable onremove={() => remove(t)} />
{/each}

Variants

Soft (unselected) vs filled (selected).

primary secondary success info warning danger ghost

<Chip text="secondary" />
<Chip text="primary" variant="primary" selected />
<Chip text="danger" variant="danger" removable />

Sizes & states

sm md lg disabled link