View Toggle
The Grid | List | Board icon switch for a list page, with its labels hidden on a phone.
- Status
- Since
0.23.10- Accessibility pattern
- tablist, one selected tab
Last updated
Install
Add View Toggle from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.
pnpm dlx shadcn@latest add @vegastack/view-toggleThe same command installs the registry items it composes: @vegastack/tabs.
Usage
import { ViewToggle } from "@/components/ui/view-toggle";
<ViewToggle value={view} onValueChange={setView} />;ViewToggle switches a list page between its views — the default (pill) Tabs at the toolbar's h-8 tier, one view
always selected; every toolbar switch uses this style. The labels show beside the icons from a small screen up and hide on a phone (they stay in
the accessible name). DataList mounts it for you in the FilterBar
view slot when you pass onViewChange, and remembers the choice for the session.
Examples
Views
views sets which views are offered, in order: Grid (LayoutGrid), List (List) and Board
(Columns3). An app passes only the views it allows — views={["list", "board"]} for a task list.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
onValueChange* | (view: V) => void | — | Called with the view the user picks. |
value* | V | — | The current view. |
aria-label | string | "View" | The group's accessible name. |
className | string | — | Extra classes for the group. |
labels | Partial<Record<ListView, string>> | — | Relabel a view ("Cards" for "Grid"). |
views | readonly V[] | ["grid", "list"] | The views offered, in order. |
Data attributes and CSS variables on ViewToggle
| Attribute | Values |
|---|---|
data-slot | "view-toggle" |
data-view | mirrors a prop or state value |
Accessibility
- A
tablistnamed "View" (aria-labelto rename); the current view is the selected tab. - On a phone the labels are visually hidden but still name each tab.
| Key | Action |
|---|---|
| Tab | Move into and out of the list |
| ← / → | Move between views |
| Enter / Space | Switch to the focused view |
| Contract | States tested |
|---|---|
| Behaviour | grid, list, board |
| Accessibility | labeled, browser-accessibility-test |
| Visual | default, hover |