ErrorState

Generic error state, composed on Empty. Replaces the five per-feature "something went wrong" implementations with one primitive: an icon, a title, an optional message, and an optional retry action.

Search failed

We couldn't reach the materials index.

Usage

import { ErrorState, ErrorStateProps, ErrorStateTone } from "@desk/ui/components/error-state";

Best practices

ErrorState renders a failure UI (icon / title / message / retry) but does not catch errors — wrap the throwing subtree in an ErrorBoundary and render this in its fallback.
Pass retry to show the retry button (omit it to hide); it's built on Empty, so layout / minHeight props pass straight through.

Props

Prop	Type	Default	Description
actions	`React.ReactNode`		Additional actions rendered alongside the retry button.
icon	`LucideIcon`		Icon shown above the title. Defaults based on `tone`.
message	`React.ReactNode`		Supporting copy describing what went wrong.
retry	`() => void`		Called when the retry button is pressed. Omit to render no retry button.
retryLabel	`string`		Retry button label. Defaults to "Try again".
retryTestId	`string`		Test id applied to the retry button, for Playwright targeting.
tone	`ErrorStateTone`		Semantic tone driving the icon color. Defaults to "danger".
title	`React.ReactNode`		Heading text. Defaults to "Something went wrong".
layout	`EmptyLayout`	`"centered"`	Layout variant. `card`/`card-dashed` wrap the content in a Card; `centered` fills its parent up to `minHeight`.
minHeight	`string`	`"min-h-[50vh]"`	Tailwind min-height class applied only in the `centered` layout.
size	`"base" \| "sm" \| "lg" \| null \| undefined`

Also exports

interfaceErrorStateProps
typeErrorStateTone

Composition

Builds on

Button, Empty