ToggleListView
Two-state control for switching product listings between grid and list layouts.
Best for
Import
import { ToggleListView } from "@enadhq/enad-react-sdk/client/storefront"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.
Examples
Live examples you can edit directly in the sandbox.
Grid and list toggle
Use this control in the results toolbar when the visitor should decide how dense the product list feels.
Localized branded toggle
Use the shared labels, icons, and classNames seams when a brand app needs local wording and icon treatment without wrapping the control.
Slots
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | string | — | No description yet. |
| onChange | (mode: "grid" | "list") => void | — | No description yet. |
| className | string | — | No description yet. |
| labels | string | — | No description yet. |
| classNames | ToggleListViewClassNames | — | No description yet. Slot keys rootitemicon |
| gridIcon | string | — | No description yet. |
| listIcon | string | — | No description yet. |