Chip

Pill-shaped tag with optional close button. Three variants (solid / soft / outline) × six tones × three sizes. Use it for filters, selected values, taxonomies.

redgreenyellowbluepurpledefault

solidsoftoutline

designmotionreactsvelte

Usage

import { Chip } from '@bwo-ui/react';

// Removable tag
<Chip tone="purple" onRemove={() => removeTag(t)}>{t}</Chip>

// Clickable filter
<Chip variant={active ? 'solid' : 'outline'} onClick={toggle}>All</Chip>

// With a leading dot
<Chip leading={<Dot color="#16a34a" />} tone="green" variant="soft">
  Live
</Chip>

Props

Prop	Type	Default	Description
`variant`	`'solid' \| 'soft' \| 'outline'`	`'soft'`	Visual variant.
`tone`	`'default' \| 'red' \| 'green' \| 'yellow' \| 'blue' \| 'purple'`	`'default'`	Colour palette.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Pill size.
`leading`	`ReactNode`	—	Optional icon / dot / avatar before the label.
`trailing`	`ReactNode`	—	Optional element before the close button.
`onRemove`	`() => void`	—	When provided, renders the × close button.
`onClick`	`() => void`	—	When provided, the chip acts as a button.
`disabled`	`boolean`	—	Suppress interactions.