# Error State

Error screen or section for offline, not found, server and permission problems, optionally over a faint outline of what failed. It can retry on a countdown and hand smoothly back to your content.

> Composed · Free · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add error-state
```

## Import

```tsx
import { ErrorState, errorStateDefaults } from "@/components/ui/error-state/error-state";
```

## Variants

- `inline` — Inline with auto-retry: `npx @lumioui/cli add error-state-inline`
- `not-found` — Not found: `npx @lumioui/cli add error-state-not-found`
- `offline` — Offline: `npx @lumioui/cli add error-state-offline`
- `permission` — Permission denied: `npx @lumioui/cli add error-state-permission`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `kind?` | `ErrorKind` | Which failure — picks the glyph and default copy. Default "generic". |
| `layout?` | `"screen" | "inline"` | "screen" (centred, fills its parent) or "inline" (a failed section). Default "screen". |
| `title?` | `string` | Override the title. |
| `description?` | `string` | Override the help line. |
| `code?` | `string` | Small reference under the help — "Error 503 · Ref 7Q2-K9". |
| `icon?` | `IconName` | Override the glyph. |
| `illustration?` | `React.ReactNode` | Replace the glyph disc with your own illustration. |
| `onRetry?` | `() => void | Promise<unknown>` | Primary action. May return a Promise — rejection counts as a failed retry. |
| `retryLabel?` | `string` | Primary action label. Default per kind ("Try again", "Open Settings"…). |
| `retryFailedMessage?` | `string` | Shown (and announced) after a failed retry. |
| `secondaryAction?` | `{ label: string` | Quieter second action. |
| `onPress` | `() => void }` | — |
| `autoRetry?` | `number` | Retry automatically after this many seconds (restarts after each failure). |
| `structure?` | `React.ReactNode` | The exact layout of the content that failed, drawn dim under the error. |
| `onRecover?` | `() => void` | After a successful retry: the error dims, a sheen crosses the structure, then this fires — show the real content here. |
| `className?` | `string` | — |

## Icons rendered

- `wifi-off` — /icons.html?i=wifi-off
- `search` — /icons.html?i=search
- `alert-triangle` — /icons.html?i=alert-triangle
- `lock` — /icons.html?i=lock
- `info` — /icons.html?i=info

Source: https://lumioui.com/components/error-state