Component gallery

PageLoading / PageError

The two page-level lifecycle states on the same PageInfo primitive as EmptyState, so loading, error, and empty screens read as one family.

PageLoading

Spinner + title + optional description

Loading jobs

Fetching the latest runs.

PageLoading: compact

For nested panels and cards

Loading

PageError

Error-toned disc, description, and a recovery action

Couldn't load this page

The request timed out after 30 seconds.

PageError: custom icon/tone

Any registry icon; warning tone for softer failures

You don't have access

Ask an admin to add you to this workspace.

PageError: pulsing while idle

iconPulse keeps a waiting state visibly alive without a spinner

Waiting for the first run

This job has never produced output; results appear here after its first run completes.

Full lifecycle

One container swapping loading → error → content

Fetching catalog

This usually takes a few seconds.

ListState

The four-way branch as one component: error beats loading beats true-empty beats filtered-empty; collapsing them into one message becomes unwritable
The loaded list renders here.

Styling slots

Every className the component exposes, and what it reaches
PageLoading
className
the outer container
iconWrapClassName
the disc behind the icon
iconClassName
the icon
titleClassName
the heading
descriptionClassName
the body copy
actionClassName
the recovery action slot
spinnerClassName
the spinner, alongside the separate spinnerSize prop
PageError
className
the outer container
iconWrapClassName
the disc behind the icon
iconClassName
the icon
titleClassName
the heading
descriptionClassName
the body copy
actionClassName
the recovery action slot
@versable-git/ui · all states, both themes