Error State
错误状态
Something actually broke — not "no data", genuinely broken — and the user has to be told what to do about it.
Live Demo
Actually clickableCouldn't load photos
Check your connection and try again.
Details
HTTP 503 · upstream timeout
What you just saw:"Could not load photos. Check your connection and try again" with a "Retry" button, shown in the exact spot where the list content should have been.
What it actually is
An error state and an empty state are two different things. An empty state means there was never anything; an error state means there should have been something and the app could not get it. The latter must offer a retry and an explanation, not just a sad face.
Anatomy · What it's made of
Icon图标
A warning or broken-connection symbol, visually toned down
Title标题
Plain language, no error codes
Reason原因
Expandable technical detail
Recovery恢复操作
Such as "Retry" or "Open settings"
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| A data request failed | Yes |
| A permission was denied (camera, photos) | Yes |
| The device is in a bad state (offline, out of storage) | Yes |
| The input format is invalid | Depends |
| The content genuinely does not exist | No |
Do not show users raw technical strings like "Error 500" or "ECONNREFUSED".
A permission error has to offer a "Open settings" shortcut instead of just stating that permission is missing and leaving the user stuck.
Similar Patterns
Don't mix these upError StateCurrent
错误状态
Something actually broke — not "no data", genuinely broken — and the user has to be told what to do about it.
Empty State
空状态
The block you show when a list is completely empty — it should explain why it is empty and what to do next.
In one line:Something actually broke — not "no data", genuinely broken — and the user has to be told what to do about it.
Alert
警示框
A message that has to be taken seriously: something broke, something is at risk, and you need to act on it.
Empty State
空状态
The block you show when a list is completely empty — it should explain why it is empty and what to do next.
Inline Validation
即时校验
Tell the user while they type whether the value is right, instead of waiting until they submit.
How to tell AI
Three levels of promptAdd the component name and specifics
When a list fails to load, show an error state: "Could not load photos", "Check your network connection", and a "Retry" button, with the technical error code tucked inside a collapsible "Details" section.
Don't just say this to AI
Bad → BetterDon't say this to AI
Show an error message when loading fails.
Say this instead
Write the error state as plain-language title + cause + recovery action: "Retry" for network errors, "Open settings" (launching settings) for permission errors, "Go back" for 404, put the technical code in a <details> collapsed by default, and show a loading state on the retry button to prevent double submits.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.