EEnterUI
DocsComponentsThemesDonation
Get Started
      • ErrorState
      • ErrorBoundaryFallback
      • LoadingOverlay
      • SkeletonForm
EnterUIDocsProduct OperationsProduct SurfacesError and LoadingErrorState
Product OperationsUpdated 6 May 2026

ErrorState

Page or panel-level error UI with title, description, retry, and secondary action slots.

ErrorState is the canonical error surface. Use tone="error" for blocking failures or tone="neutral" for recoverable empties. The retry button is only rendered when you provide onRetry.

#Default usage

Failed request

Use onRetry in app code to surface the retry button.

Couldn't load releases

The release feed is temporarily unavailable.

Code
<ErrorState
  description="The release feed is temporarily unavailable."
  title="Couldn't load releases"
  tone="error"
/>

#Import

Code
import { ErrorState } from "@froggdesign/enter-ui-react";

#Accessibility

ErrorState exposes role="alert" so screen readers announce the failure.

#API

  • title, description: copy slots.
  • onRetry + retryLabel: when set, renders a primary retry button.
  • secondaryAction: extra slot rendered next to retry.
  • tone: "neutral" (default) or "error".

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

PreviousSettingsSection
NextErrorBoundaryFallback

On this page

  1. Default usage
  2. Import
  3. Accessibility
  4. API
  5. Styling