When to use it

Use FilterChip when filters need to feel lightweight and easy to remove. It works both as a selectable facet control and as an active-filter summary row after selections have already been made.

For larger grouped filters with counts, options, and several input types, use FilterPanel instead.

Composition notes

onClick handles the main toggle behavior. Add onRemove when the active chip should also expose a dedicated remove affordance.

Keep labels short. Chips lose clarity quickly when they start carrying long values or stacked metadata.

Behavior and theming guidance

The active state should be obvious at a glance. If chips are serving as an active-filter summary, place them close to the results context so the relationship stays clear.

Use a consistent chip style across one results surface. Mixing too many chip weights makes the filtering UI harder to scan.

classNames exposes stable semantic hooks for the chip root and remove icon. Use className for the overall chip shell and classNames.icon when a brand needs to tune the remove affordance without relying on raw svg selectors.