# SvChip
A compact, interactive pill for a selected value, filter token, or entity: an
optional leading avatar or icon, a label, and an optional remove button.
`SvChip` is the interactive cousin of [SvBadge](https://svgrid.com/docs/help/ui-components/sv-badge/). Where a badge is a
static status marker, a chip can be clicked to select and dismissed to remove -
perfect for tag inputs, active-filter rows, and "assigned to" pickers. It draws
from the grid's `--sg-*` semantic tokens in both soft and solid fills.
Related: [SvBadge](https://svgrid.com/docs/help/ui-components/sv-badge/) · [SvAvatar](https://svgrid.com/docs/help/ui-components/sv-avatar/) · [Feedback & display overview](https://svgrid.com/docs/help/ui-components/feedback/)
## Installation
Add it with the CLI - this drops a ready-to-edit `SvChip` starter into your app:
Prefer to see it first? `npx @svgrid/ui try chip` opens it in a throwaway sandbox - no project needed.
Or install the package and import it directly. `SvChip` ships free in
`@svgrid/grid` (dependency-free):
The examples on this page import from `@svgrid/grid`:
```svelte
```
```ts
import { SvChip } from '@svgrid/grid'
```
## Example
> Live demo: Status & display: alert, stat, timeline, chip, divider, empty - https://svgrid.com/demos/339-status-display/
```svelte
{#each tags as tag}
(tags = tags.filter((t) => t !== tag))}>{tag}
{/each}
```
## Props
| Prop | Type | Default | Description |
| ----------- | ---------------------------------------------------------------------- | --------- | -------------------------------------------------------------- |
| `variant` | `neutral` \| `accent` \| `success` \| `warning` \| `danger` \| `info` | `neutral` | Semantic color, from the matching `--sg-*` token. |
| `size` | `sm` \| `md` | `md` | Height, font size, and padding. |
| `removable` | `boolean` | `false` | Shows a trailing remove (x) button. |
| `onRemove` | `() => void` | - | Called when the remove button is clicked. |
| `onClick` | `() => void` | - | Makes the label a button and fires on activation. |
| `solid` | `boolean` | `false` | Filled solid fill instead of the default soft tint. |
| `disabled` | `boolean` | `false` | Dims the chip and blocks interaction. |
| `children` | `Snippet` | - | The chip label. |
| `leading` | `Snippet` | - | Leading content such as an avatar or icon. |
## Examples
### Removable tags
Wire `removable` and `onRemove` to build a tag list from an array:
```svelte
{#each labels as label (label)}
remove(label)}>{label}
{/each}
```
### Clickable filter chips
Give `onClick` to turn a chip into a toggle for an active-filter bar:
```svelte
In stock
```
### Entity chips with an avatar
The `leading` snippet slots an [SvAvatar](https://svgrid.com/docs/help/ui-components/sv-avatar/) for people and entities:
```svelte
{#snippet leading()}{/snippet}
Ada Lovelace
```
### Active-filter token row
Reflect the current filters as a removable chip set: each chip clears its own
filter, and a trailing action resets them all:
```svelte
{#each filters as f (f.key)}
remove(f.key)}>
{f.label}
{/each}
{#if filters.length}
(filters = [])}>Clear all
{/if}