Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/filter-chip.

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.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=FilterChip.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes