Error State Panel
Section-level error-state chrome — optional status code, title, description, and action slot
SSR mode
Examples
404 with status, description and action
404
Page not found
The page you are looking for doesn't exist or has been moved.
Without status — generic error
Something went wrong
An unexpected error occurred. Please try again or contact support if the problem persists.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| ErrorStatePanel | Section-level error-state chrome. Renders a centred column with an optional large Status code (e.g. "404", "500"), a required title, an optional muted description, and an optional action slot. Background fill is on by default to visually differentiate from empty states. Wrapper-styling. |
ErrorStatePanel
Section-level error-state chrome. Renders a centred column with an optional large Status code (e.g. "404", "500"), a required title, an optional muted description, and an optional action slot. Background fill is on by default to visually differentiate from empty states. Wrapper-styling.
| Property | Type | Required | Description |
|---|---|---|---|
| Title | string | Error heading. Rendered as <h3> in text-lg font-semibold tracking-tight text-foreground. | |
| Description | string? | Supporting muted text in text-sm text-muted-foreground max-w-md. Omit to suppress. | |
| Status | string? | Optional HTTP status code or short label (e.g. "404", "500"). Rendered above the title in text-6xl font-bold text-muted-foreground/40. Omit to suppress. | |
| Action | RenderFragment? | Optional action slot rendered below the description. Typically a single <Button>. | |
| Borders | bool | Toggles border border-border rounded-lg. Default: true. | |
| BgFilled | bool | Toggles bg-subtle-bg on the wrapper. Default: true — provides visual contrast against page background. | |
| Gutters | bool | Toggles py-12 px-6 on the wrapper. Default: true. |