A client-side React component that renders styled error, warning, and info state banners with optional action buttons and convenience wrappers for common error scenarios. ## Key Components ### `ErrorState` The primary component accepting the following props: | Prop | Type | Default | Description | |------|------|---------|-------------| | `title` | `string` | `'Error'` | Heading text | | `message` | `string` | — | Body message (**required**) | | `variant` | `'error' \| 'warning' \| 'info'` | `'error'` | Visual style using ODS design tokens | | `showIcon` | `boolean` | `true` | Toggles the `AlertTriangle` icon | | `showRetry` | `boolean` | `false` | Shows "Try Again" button | | `showHome` | `boolean` | `false` | Shows "Go Home" button | | `onRetry` | `() => void` | — | Retry callback | | `onHome` | `() => void` | — | Home navigation callback | | `className` | `string` | — | Applied to inner card | | `containerClassName` | `string` | — | Applied to outer wrapper | ### Convenience Components | Component | Variant | Buttons | |-----------|---------|---------| | `PageError` | `error` | Retry + Home | | `LoadError` | `error` | Retry | | `NotFoundError` | `warning` | Home | > **Note on ODS tokens:** Variant styles use `-secondary` background tokens (e.g., `bg-ods-error-secondary`) rather than Tailwind alpha modifiers, which are incompatible with hex-based CSS custom properties in Tailwind 3.x. ## Usage Example ```typescript import { ErrorState, LoadError, NotFoundError } from './error-state' // Generic error with retry refetch()} /> // Convenience: loading error reload()} /> // Convenience: 404-style warning router.push('/')} /> // Info banner (no icon) ```