Inputs

ViewToggle

Toggle between views (sliding indicator). Default: Grid/List. Pass options for custom variants (value, icon, title) and bind your logic to value/onChange.

Grid / List
Current: grid
Custom options (own variants + executable logic)

Pass options with value, icon, title. Use value / onChange to run your code (e.g. switch layout).

Active: grid
Your code runs here (e.g. layout by view)
Card 1
Card 2
Card 3
Usage
import { ViewToggle } from '@pulsesync/uikit'
import type { ViewToggleOption } from '@pulsesync/uikit'

/* Default Grid / List */
<ViewToggle value={view} onChange={setView} gridTitle="Cards" listTitle="List" />

/* Custom options: your variants + executable code */
const options: ViewToggleOption[] = [
  { value: 'grid', icon: <GridIcon />, title: 'Grid' },
  { value: 'list', icon: <ListIcon />, title: 'List' },
  { value: 'compact', icon: <CompactIcon />, title: 'Compact' },
]
<ViewToggle value={view} onChange={setView} options={options} />
{view === 'grid' && <GridLayout />}
{view === 'list' && <ListLayout />}
{view === 'compact' && <CompactLayout />}