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/listing-toolbar.

When to use it

Use ListingToolbar when a browse page needs a stable control seam between the heading/meta layer and the shopper controls around filtering, sorting, view changes, or active filter chips.

It is especially useful when the page shell should stay responsible for state while the SDK provides a reusable toolbar structure.

Composition notes

Lead with the slot-first path when the toolbar needs custom ordering, extra utility actions, or branded heading markup.

Use the convenience props when the toolbar fits the common pattern:

• title for the browse heading
• resultCount and resultLabel for the meta line
• filters for the filter trigger
• sort for the sort control
• actions for toggles or secondary buttons
• chips for active filter chips or quick filters

ListingToolbar does not own browse state. Keep filter, sort, pagination, and result state in the page shell and pass controls into the toolbar.

Behavior and theming guidance

Keep the toolbar focused on browse controls. If the page starts to need hero copy, editorial storytelling, or merchandising blocks above the grid, keep those concerns outside the toolbar and let the toolbar remain the compact control seam before the result area.

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=ListingToolbar.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes