CropWatch User Interface

CwChip

Tone × variant × size matrix with dismissible option.

solid

soft

outline

Dismissible

Sizes

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

Documentation Upgrade

Start here

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.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

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 />