# List Error State

The state of a list, table or card whose request failed, with a way to retry.

```tsx
import { ListErrorState } from "@zenoxai/ui/patterns/list-error-state"

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

## Usage

```tsx
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](/patterns/list-empty-state). 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.

```tsx
import { ListErrorState } from "@zenoxai/ui/patterns/list-error-state"

function ListErrorStateCustomCopy() {
  return (
    <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:

```tsx
// 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.

```tsx
import { ListErrorState } from "@zenoxai/ui/patterns/list-error-state"

function ListErrorStateWithoutRetry() {
  return (
    <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

`import { ... } from "@zenoxai/ui/patterns/list-error-state"`

### ListErrorState

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| description | `string` | `The data could not be loaded. Try again in a moment.` | Already-translated description. |
| onRetry | `(() => void)` |  | Called by the retry button. Omit to hide the button. |
| retryLabel | `string` | `Try again` | Already-translated retry label. |
| title | `string` | `Something went wrong` | Already-translated title. |