Skip to content
Compositions

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 "@instruments/materia-ui/compositions/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

PropTypeDefaultDescription
actionsReact.ReactNode

Additional actions rendered alongside the retry button.

iconLucideIcon

Icon shown above the title. Defaults based on tone.

messageReact.ReactNode

Supporting copy describing what went wrong.

retry() => void

Called when the retry button is pressed. Omit to render no retry button.

retryLabelstring

Retry button label. Defaults to "Try again".

retryTestIdstring

Test id applied to the retry button, for Playwright targeting.

toneErrorStateTone

Semantic tone driving the icon colour. Defaults to "danger".

titleReact.ReactNode

Heading text. Defaults to "Something went wrong".

layoutEmptyLayout"centered"

Layout variant. card/card-dashed wrap the content in a Card; centered fills its parent up to minHeight.

minHeightstring"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