Empty & error states

The states a data view spends real time in. Empty is not one state: first-run (no objects exist yet) is different from no-results (a filter cleared the list). Error is a system failure the user did not cause and cannot fix by editing input — distinct from inline field validation.

First-run empty

No customers yet

Add your first customer to start tracking accounts.

<EmptyState  title="No customers yet"  description="Add your first customer to start tracking accounts."  action={<Button variant="primary"><Plus className="size-4" /> Add customer</Button>}/>

No results

No matches

No customers match these filters.

<EmptyState  variant="no-results"  title="No matches"  description="No customers match these filters."  action={<Button variant="secondary">Clear filters</Button>}/>

No-results offers a way back to data (clear filters), never a “create first object” action — the data exists, the filter is hiding it.

Error with retry

Couldn't load customers

The request timed out. Check your connection and try again.

<ErrorState  title="Couldn't load customers"  description="The request timed out. Check your connection and try again."  onRetry={() => refetch()}/>

EmptyState props

Prop	Type	Default	Notes
`variant`	`'empty' \| 'no-results'`	`'empty'`	First-run vs filtered-out; changes the default icon.
`title`	`ReactNode`	—	The headline; carries the meaning.
`description`	`ReactNode`	—	One supporting sentence.
`action`	`ReactNode`	—	A single next step.
`icon`	`ReactNode`	—	Override the icon; null to omit.

ErrorState props

Prop	Type	Default	Notes
`title`	`ReactNode`	—	Names the failed operation.
`description`	`ReactNode`	—	What happened and what to do.
`onRetry`	`() => void`	—	Renders a labelled retry button.
`retryLabel`	`string`	`'Try again'`	Retry button text.
`action`	`ReactNode`	—	Extra action beside retry.