AI Error State

A contextual error display for AI-specific failure modes. Accepts a type prop that maps to a pre-configured icon, heading, and description. Supports a custom message override and an optional onRetry callback that renders a retry button.

Something went wrong

An unexpected error occurred. Please try again.

import { AIErrorState } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add ai-error-state

Import

import.tsx

import { AIErrorState } from "@aetherstack/patterns"

Usage

ai-error-state.tsx

import { AIErrorState } from "@aetherstack/patterns"

export function MyErrorState() {
  return (
    <AIErrorState
      type="rate-limit"
      onRetry={() => retryRequest()}
    />
  )
}

// With a custom message
export function CustomErrorState() {
  return (
    <AIErrorState
      type="generic"
      message="Something went wrong. Please check your API key."
      onRetry={() => retryRequest()}
    />
  )
}

Props

Prop	Type	Default	Description
type	"rate-limit" \| "context-length" \| "provider-outage" \| "network" \| "generic"	"generic"	Error type that maps to a pre-configured icon, heading, and description.
message	string	—	Custom error message that overrides the default description for the selected type.
onRetry	() => void	—	When provided, renders a Retry button that calls this handler on click.
className	string	—	Additional CSS classes applied to the root container.

* Required

Accessibility

→The error container uses role='alert' so screen readers announce it immediately when mounted.
→The error icon is aria-hidden — the heading and description convey the full error context.
→The retry button uses a descriptive aria-label that includes the error type for context.