Form Error

1<FormError
2  what="Failed to load data"
3  why="Network connection was interrupted."
4  how="Check your internet connection and try again."
5  onRetry={() => handleRetry()}
6/>

1<FormError
2  what="Payment processing failed"
3  why="Your card was declined by the payment processor."
4  how="Verify your card details or try a different payment method."
5  helpLink="https://example.com/help/payments"
6/>

1import { FormError, commonErrors } from "@/components/ui/form-error";
2
3<FormError {...commonErrors.network} />

1<FormError {...commonErrors.validation.email} />

1<FormError {...commonErrors.validation.password} />

1<FormError {...commonErrors.auth.sessionExpired} />

1<FormError {...commonErrors.upload.tooLarge} />

1<FormError
2  {...commonErrors.payment.declined}
3  onRetry={() => handleRetry()}
4  helpLink="https://example.com/help/payments"
5/>

1// UX Heuristic #9: Help Users Recognize, Diagnose, and Recover from Errors
2//
3// Error Message Formula:
4// 1. WHAT went wrong (clear, specific)
5// 2. WHY it happened (root cause)
6// 3. HOW to fix it (actionable steps)
7// 4. ACTION to resolve (optional button)
8
9<FormError
10  what="What went wrong"
11  why="Why it happened"
12  how="How to fix it"
13  onRetry={handleRetry}
14  helpLink="/docs/help"
15/>