Error State

A consistent presentation for failed data fetches or unexpected errors. Gives users context and a clear path forward.

Failed to load members

We couldn't fetch your team data. Check your connection and try again.

import { ErrorState } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add error-state

Import

import.tsx

import { ErrorState } from "@aetherstack/patterns"

Usage

error-state.tsx

<ErrorState
  title="Failed to load members"
  description="We couldn't fetch your team data. Check your connection and try again."
  action={
    <Button variant="outline" onClick={refetch}>
      Try again
    </Button>
  }
/>

// Defaults work out of the box — no props required
<ErrorState />

Props

Prop	Type	Default	Description
title	string	"Something went wrong"	Error heading.
description	string	"An unexpected error occurred…"	Explanatory message.
action	ReactNode	—	Retry or recovery CTA.
className	string	—	Additional classes on the container.

* Required

Accessibility

→Renders with role="alert" — error is announced immediately to screen readers.
→Pair with focus management: move focus to this component when it appears after a failed action.
→The retry action should re-trigger the same operation that failed.