Chip · CropWatch UI

CwChip

Compact labels for status, tags and active filters. Every tone comes in solid, soft and outline variants, and all variants share the same height.

Solid

primary secondary info warning danger success

Soft

primary secondary info warning danger success

Outline

primary secondary info warning danger success

Dismissible filters

North field Temperature Last 24 hours Online only

Last event: none yet

Disabled

Disabled Disabled outline Disabled dismissible

Sizes

Small Medium Large

<CwChip tone="success" variant="soft" label="Online" />

<CwChip
	label="North field"
	dismissible
	dismissLabel="Remove filter: North field"
	ondismiss={() => removeFilter('north')}
/>

API

Usage and API reference

CwChip is for compact labels, filters, and statuses. The API is intentionally small: pick a tone, variant, size, and optionally let the user dismiss it.

How to think about it

Use chips for short labels Chips work best for concise status or filter text, not paragraphs or multi-line controls.
Pick the variant by visual weight `soft` is the calm default, `solid` is strongest, and `outline` keeps the background clean.
Only make it dismissible when removal matters If the user should clear a filter or token, set `dismissible` and handle `ondismiss`.

Props and callbacks

API	Type	Details
`label` Required	`string`	Visible chip text.
`tone` Default: `primary`	`CwTone`	Color theme for the chip.
`variant` Default: `soft`	`'solid' \| 'soft' \| 'outline'`	Visual style preset.
`size` Default: `md`	`'sm' \| 'md' \| 'lg'`	Chip scale.
`dismissible` Default: `false`	`boolean`	Shows the dismiss button.
`disabled` Default: `false`	`boolean`	Disables chip dismissal and dims the UI.
`ondismiss`	`() => void`	Called when the dismiss affordance is activated.
`dismissLabel`	`string`	Accessible label for the dismiss button.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Static status chips

Use tone and variant to control how much the chip stands out.

<CwChip tone="success" variant="soft" label="Online" />
<CwChip tone="warning" variant="outline" label="Review needed" />
<CwChip tone="danger" variant="solid" size="sm" label="Alarm" />

Dismissible filter chip

Useful for removable filter tokens or selected facets.

<script lang="ts">
	let filters = $state(['North greenhouse', 'Offline devices']);
</script>

{#each filters as filter}
	<CwChip
		label={filter}
		dismissible
		ondismiss={() => (filters = filters.filter((item) => item !== filter))}
	/>
{/each}

<CwChip label="Locked filter" dismissible disabled />