display contract
ErrorState
Page-level or section-level failure surface. Different from Toast (transient) and Alert (in-flow).
Variants
- inline
- Inside a card
- page
- Full-page error
- illustrated
- With a hero illustration
Sizes
- md
- lg
Slots
- icon
- title
- description
- retry
- Primary action — "Try again"
- support
- Secondary action — link to support
Example
<ErrorState title="Couldn't load projects" description="Check your connection." retry={<Button onClick={refetch}>Try again</Button>} />Usage rule
Always include a retry button when the failure is recoverable.
The full ErrorState contract has 4 more rules, plus the do-not patterns. Get the full recipe.