Components / status

status · @awesome-ds/react

ErrorState

Failure recovery surface.

Rules: rule.interaction.product-quality

State matrix

errorrequired

Anatomy

  • error heading
  • plain-language description
  • recovery action

Keyboard contract

Recovery action is keyboard operable; focus moves only for blocking errors.

Screen-reader contract

The error heading and recovery guidance are announced together.

Content rules

  • Say what failed without blame.
  • Give a concrete retry or alternative.

Public API

PropTyperequiredDescription
titlestringrequiredFailure summary
descriptionstringrequiredRecovery guidance
actionLabelstring—Recovery action
onAction() => void—Recovery callback

Adaptation contracts

RTL
Align status copy to inline-start and keep number/value semantics locale aware.
High contrast
Expose status with text, shape, or system color rather than authored color alone.
Reduced motion
Stop looping indicators where possible and retain a textual status.

Verification IDs

ErrorState/recovery-action

Live

Live

Copyable example

import { ErrorState } from "@awesome-ds/react";

<ErrorState title="Failed" description="Retry" actionLabel="Retry" />