feedback
Retry Surface
Transforms a failed content region into localized recovery with retry and an explicit alternate path.
- feedback
- retry
- error
- recovery
- context
Recovery belongs to the surface that failed, so the user keeps context and a next action.
Live preview
Preview unavailable
The source did not arrive, but the surrounding product context is still here.
Quick usage
import { RetrySurface } from "@pinky-ui/systems";
<RetrySurface title="Preview unavailable" onRetry={reload} />Install
Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add retry-surfacePrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- Pointer and keyboard paths expose the same state change.
- Status and focus remain meaningful when motion is disabled.
Performance
- Uses local state and transforms; no per-frame React pointer loop.
Reduced motion
Resolves state changes without layout animation while preserving semantics.
When to use
- Product workflows with a clear reversible or inspectable state.
When not to use
- Decorative motion without a user task.
Skill
Purpose
Turn a failed content region into a localized recovery surface without removing the context that failed.
Use when
A panel, preview, result set or embedded content source can be retried independently from the rest of the product.
Avoid
Global toast-only errors, silent automatic retry loops, or a retry control that does not explain what will be attempted again.
Accessibility
Use a concise alert for the failure, label Retry by its affected context when needed, and announce successful recovery once.
Keyboard and touch
Retry and alternate actions are native buttons with clear targets. Focus must remain in the local surface and never depend on a pointer-only affordance.
Reduced motion and performance
Replace the failed state immediately when motion is reduced. Guard repeated retries, clean up async callbacks and avoid retrying after unmount.
Composition and anti-patterns
Keep the error, recovery action and alternate path in the same surface. Use Connection State when the cause is a product-wide connection change rather than one failed region.