Primitive

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.
control
DOM renderImage render
ChipDefault

Playground

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

Loading playground

Rendered matrix

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

Default

Filter chips with a selected state.
Render state

Intents

Available non-selected intents.
Render state

Icons

Icon and selected-check behavior.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
selectedbooleanfalsePromotes the chip into the active ink state.
intent'neutral' | 'strong' | 'subtle' | 'sky' | 'terminal' | 'ultra' | 'danger'neutralNon-selected semantic intent.
leadingIconIconName | ReactElement-Optional leading glyph.
childrenReactNode-Chip label.