ViewSwitcher

ViewSwitcher lets operators move between saved filters, table views, and work queues without losing the current screen.

Import

import {
  ViewSwitcher,
  ViewSwitcherItem,
  ViewSwitcherLabel,
  ViewSwitcherMeta,
  ViewSwitcherCount,
  ViewSwitcherActions,
} from '@nim-ui/components';

Basic Usage

Order Queue Views

View Code

<ViewSwitcher aria-label="Order views">
  <ViewSwitcherItem
    value="all"
    selected
    count={128}
    meta="All active orders"
    onSelect={setView}
  >
    All orders
  </ViewSwitcherItem>
  <ViewSwitcherItem value="review" count={12} meta="Manual approval" onSelect={setView}>
    Needs review
  </ViewSwitcherItem>
  <ViewSwitcherItem value="delayed" count={6} meta="Breached SLA" onSelect={setView}>
    Delayed
  </ViewSwitcherItem>
</ViewSwitcher>

Compact Density

Compact Saved Views

View Code

<ViewSwitcher density="compact" aria-label="Inventory views">
  <ViewSwitcherItem value="available" selected count={320}>Available</ViewSwitcherItem>
  <ViewSwitcherItem value="low" count={18}>Low stock</ViewSwitcherItem>
</ViewSwitcher>

Props

ViewSwitcher

Name	Type	Default	Description
`density`	`'comfortable' \| 'compact'`	`'comfortable'`	Adjusts tab spacing for primary table views or tighter toolbar placement.
`aria-label`	`string`	-	Provides the accessible tablist name.

ViewSwitcherItem

Name	Type	Default	Description
`value *`	`string`	-	Stable value passed to onSelect when the view is chosen.
`selected`	`boolean`	-	Marks the active view and sets aria-selected.
`count`	`ReactNode`	-	Optional queue count or saved-view result total.
`meta`	`ReactNode`	-	Short secondary context for why the queue exists.
`onSelect`	`(value: string) => void`	-	Called when the operator chooses the view.
`disabled`	`boolean`	-	Disables unavailable views while keeping the queue visible.

Backoffice Guidance

Put ViewSwitcher below DataToolbar when views change the table query.
Keep labels short and let meta explain operational meaning.
Counts should reflect the current workspace, tenant, or filter scope.
Use compact density inside dense dashboards or split table/detail layouts.