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/toggle-list-view.

When to use it

Use ToggleListView when the same result set can reasonably support both grid and list presentation and the user benefits from that choice.

Composition notes

Keep the control close to sort and filter tools. It should feel like part of one results-toolbar system.

Use labels when the surrounding app should supply localized or domain-specific wording for the control. Use gridIcon and listIcon when a brand needs local icon treatment without forking the component.

Use classNames for root and item styling before reaching for a wrapper component.

Behavior and theming guidance

Persist the chosen mode when possible so visitors do not have to reselect their preferred layout every time they navigate.

Treat ToggleListView as a shared storefront primitive. Brand apps should prefer labels, icon renderers, and classNames over re-implementing the control unless the interaction model itself truly differs.

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

Implementation notes