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

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

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

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.

ViewSwitcherCount

Name	Type	Default	Description
`selected`	`boolean`	`false`	Sets the badge's filled or muted tone. ViewSwitcherItem sets this automatically from its own selected prop when rendering a count; pass it directly only when using ViewSwitcherCount on its own.

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.

ViewSwitcher

On this page