Feedback
States
EmptyState, ErrorState, LoadingState, Spinner and Skeleton: what a region shows when it has nothing, failed, or is still loading.
Examples
Empty
<EmptyState icon={<Inbox />} title="No backups yet" description="Connect a repository and run your first backup. It takes about a minute." action={<Button leftIcon={<Play />}>Run first backup</Button>} />Error and loading
Connecting to the vector registry
Loading the observatory
<ErrorState message="Bundle upload timed out after 30s." retry={() => refetch()} />
<LoadingState message="Connecting to the vector registry" />
<LoadingPanel message="Loading the observatory" />
<Skeleton width={240} height={40} />Guidelines
- Empty: a dashed panel with an icon, a title that names what is missing, one sentence on how to get one, and one primary button.
- Error: the message beside a warning icon and a Try again button; the region, not the page, shows it.
- Loading: a spinner beside a short message for a region, skeletons in the shape of the content for a card.
Props
| Prop | Type | What it does |
|---|---|---|
| icon, title, description, action | ReactNode | EmptyState. |
| message, retry, retryLabel | ReactNode, () => void, ReactNode | ErrorState. |
| message, size | ReactNode, "sm" | "md" | "lg" | LoadingState and Spinner. |
| width, height | number | string | Skeleton. |