WorkspaceSwitcher

Switch between organizations or spaces, with search and a pending state while the switch happens.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add workspace-switcher

Dependencies

What add workspace-switcher installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

Examples

1 examples · 1 component

Switching with a pending state

Choosing a workspace waits for the switch, then closes. Globex fails the first time.

API reference

Configured through props: pass the workspaces, the current one and the switch handler; it renders Popover, Command and Spinner for you.

Prop	Type	Default
`workspaces` The spaces the user can open. logo is an image or icon; the first letter of name is used otherwise.	`{ id; name; description?; logo? }[]`	—
`value` The id of the current workspace, shown on the trigger and checked in the list.	`string`	—
`onSwitch` Performs the switch. Return a promise: the list stays open with a spinner on that workspace until it settles, closes when it resolves and shows the error when it rejects.	`(workspace) => unknown`	—
`label` Names the trigger (after the current workspace) and the list.	`string`	`"Switch workspace"`
`searchPlaceholder / emptyMessage` Search field text and what shows when nothing matches.	`string / ReactNode`	`"Find a workspace…" / "No workspaces found."`
`errorMessage` Shown when onSwitch rejects.	`ReactNode \| (error) => ReactNode`	`"Couldn't switch workspaces. Try again."`
`footer` Content under the list, such as a "Create workspace" button.	`ReactNode`	—

States

The states that apply to this component and their visual treatment.

State	Treatment
Closed	The current workspace on the trigger.
Open	Search field, the list with the current workspace checked, and the footer.
Pending	A spinner on the chosen workspace; the others are disabled and closing is blocked.
Error	The message appears under the list; choose again to retry.

Accessibility

The trigger reads as "Acme, Switch workspace": the current workspace first, then what the button does.

Opening it focuses the search field; typing filters the list, arrow keys move through the matches and Enter switches.

The current workspace carries a check with the text "Current", so it is not conveyed by the icon alone.

While a switch is pending, the list reports aria-busy, the other workspaces are disabled and it can't be closed, so a slow switch is never orphaned. A failure is announced with role="alert".

Which workspaces a user may open is your backend's decision; the list only shows what you pass.