List or Grid View Toggle

List or Grid View Toggle with sizes and variants

Overview

The List or Grid View Toggle component is used to switch between list and grid view.

Please adjust the order using the order parameter so that the default viewMode is always on the left side.

Import the component:

import { ListOrGridViewToggle } from "@eqtylab/equality";

viewMode and onViewModeChange are required props and should be controlled by the parent component.

const [viewMode, setViewMode] = useState("grid");

<ListOrGridViewToggle viewMode={viewMode} onViewModeChange={setViewMode} />;

Reorder the order of the buttons using the order prop. The default viewMode should always be placed on the left side.

<ListOrGridViewToggle
  viewMode={viewMode}
  onViewModeChange={setViewMode}
  order={["list", "grid"]}
/>

Prop	Type	Default	Description
`viewMode`	`"grid"` \| `"list"`	Required	Sets the active state.
`onViewModeChange`	`(mode: "grid" \| "list") => void`	Required	Function to call when the active state changes.
`order`	`["grid", "list"]` \| `["list", "grid"]`	`["grid", "list"]`	Controls the order of the buttons.
`className`	`string`	-	Additional CSS classes to apply to the toggle.