Chip

Selectable inline filter or segmented choice atom.

Chips are compact choices. Use selected for active filters and keep non-selected tone quiet unless the filter group needs a visual anchor.

Playground

Props in the URL.

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground.

States

Every state maps to the same render route through the `state` query param.

Default

Filter chips with a selected state.

Tones

Available non-selected tones.

Icons

Icon and selected-check behavior.

Props

Name	Type	Default	Description
`selected`	`boolean`	`false`	Promotes the chip into the active ink state.
`tone`	`'default' \| 'ink' \| 'sky' \| 'sunken'`	`default`	Non-selected tonal treatment.
`leadingIcon`	`IconName \| ReactElement`	-	Optional leading glyph.
`children`	`ReactNode`	-	Chip label.