# Error state (goodtabs UI)

Says what went wrong and offers a single retry.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/error-state.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/error-state`

## Usage

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

<ErrorState title="Could not load deploys">
  <Button onClick={retry}>Try again</Button>
</ErrorState>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` |  | What went wrong, in plain words. |
| description | `string` |  | Why it happened and what happens next. |
| children | `ReactNode` |  | The one action, usually a retry button. |

## When to use

- A region failed to load and retrying can help
- Replacing the content of a card, table or panel, not the whole page

## When not to use

- Field validation, which belongs next to the field
- Errors the person cannot act on, where plain text is enough

## Notes for agents

- Renders role=alert, so mount it when the error happens rather than hiding it
- Stays monochrome on purpose: the icon and the words carry the meaning, not a red fill
- Pass one action. Two buttons turn a retry into a decision
- Add the border and radius through className when you place it inside a card

Docs: https://ui.goodtabs.co/components/error-state