List Error State

function ListErrorStateDemo() {
  return <ListErrorState onRetry={() => {}} />
}

Usage

import { ListEmptyState } from "@zenoxai/ui/patterns/list-empty-state"
import { ListErrorState } from "@zenoxai/ui/patterns/list-error-state"

export function AlertList({ query }: { query: AlertsQuery }) {
  if (query.isError) return <ListErrorState onRetry={query.refetch} />
  if (query.data.length === 0) return <ListEmptyState title="No alerts yet" />
  return <AlertsTable alerts={query.data} />
}

Render ListErrorState when the request behind a list, a table or a card failed. It keeps a failure apart from a result that is legitimately empty, which is ListEmptyState. Never show an empty state for a failed request: the user would read “nothing to do” when the data is in fact missing.

onRetry adds a “Try again” button. Pass the function that re-runs the request; leave it out when retrying cannot help.

Custom copy

The defaults, “Something went wrong” and “The data could not be loaded. Try again in a moment.”, fit any list. Replace them, already translated, when you can say what failed and what is kept.

<ListErrorState
  title="Alerts could not be loaded"
  description="The alert service did not respond. Your filters are kept."
  retryLabel="Retry"
  onRetry={() => {}}
/>

Never pass the error itself as the description:

// Wrong: the message can carry backend internals, stack details or personal data.
<ListErrorState description={error.message} onRetry={refetch} />

Send the error to the logs or the error reporter, and show the user a fixed, translated sentence.

Without retry

When the failure will not go away on its own, such as a report the server cannot build, leave out onRetry and say what the user can do instead.

<ListErrorState
  title="This report could not be generated"
  description="Retrying will not help. Contact support and quote report RPT-2291."
/>

Accessibility

• The state does not announce itself. When it replaces content the user was looking at, such as after a refresh, move focus to the retry button or announce the failure with a toast.
• The retry button has a visible label. If you replace it with retryLabel, keep a verb that says what happens: “Retry”, “Reload alerts”.

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.