Every page is designed for when it works and for when it doesn't. A mockup without error states isn't finished. The check (bun run ds:check) fails for a page that has none.
The basics
- Error isn't empty. Empty: the request worked and found nothing. Error: the request failed. Different words, different action.
- Say what happened, then what to do. "Non riusciamo a caricare gli annunci. Riprova." One clear action, no codes, no blame.
- Keep what people did. A failed form keeps what was typed; a failed section leaves the rest of the page working.
- Put it where the problem is. Next to the field, above the button, inside the section. A whole-page error only when the whole page failed.
- Never by color alone. Text, plus an icon or a label.
What can fail
| Kind | Example | Shown with |
|---|---|---|
| Page data | Search results don't load | A block in the main area, with Riprova |
| A section | The map or similar listings don't load | An inline error inside that section |
| Gone | A listing that was sold or removed | What happened, and similar listings |
| A field | An email without "@" | BaseInput invalid state |
| A form | Sending the message fails | BaseAlert above the button |
| A quick action | Saving to favorites fails | BaseSnackbar, and undo the change |
| Login needed | Favorites without an account | Why, then log in and come back |