# ErrorState

> `ErrorState` is part of the States set, imported from `@jcsoftdev/ui/states`.

Source: https://ui.jcsoftdev.com/docs/components/error-state

`ErrorState` is part of the States set, imported from `@jcsoftdev/ui/states`.

## Import

```ts
import { ErrorState } from "@jcsoftdev/ui/states";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/states/error-state`.

## Usage

```tsx
<ErrorState
  message="No pudimos cargar la agenda del día"
  correlationId="7f3a-91c2"
  correlationLabel="ID:"
  retryLabel="Reintentar"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `message` * | `ReactNode` |  |  |
| `correlationId` | `ReactNode` |  | Correlation code for support; never a raw exception. |
| `correlationLabel` | `string` | `"ID:"` | Prefix shown before the correlation id. |
| `onRetry` | `(() => void)` |  |  |
| `retryLabel` | `string` | `"Retry"` |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/states-errorstate--default)
- [Without Retry](/storybook/?path=/story/states-errorstate--without-retry)
- [Without Correlation](/storybook/?path=/story/states-errorstate--without-correlation)
- [Narrow](/storybook/?path=/story/states-errorstate--narrow)

## Source

`packages/ui/src/states/error-state/error-state.tsx`