Empty & error states
The states with no data are where products feel either considered or unfinished. Prism's EmptyState covers the whole family from one component, in three sizes, so these screens get the same care as the happy path.
The five situations
- First run — there is nothing yet because the user just arrived. Explain what will appear here and give the one action that starts it.
- No results — there is data, but this query found none. Confirm the filter and offer a way to clear it; never imply the data is gone.
- Error — something failed. Say what, in plain language, and give a retry. Do not show a raw error code as the headline.
- Offline — the network dropped. Reassure that work is not lost and that the app will reconnect.
- Success / done — a queue is cleared or a task is complete. Acknowledge it briefly and point to what's next.
Sizing
EmptyState comes in three sizes so it fits where it lands: a section size inside a card or panel, a larger size for a full page, and a compact size for a small region. Match the size to the container, not the other way round.
Rules
- One clear action per state. Two at most, with an obvious primary.
- Tone is matter-of-fact. An error is not the place for personality.
- The illustration or icon is supportive, never the point — the words carry the meaning.
- Distinguish "no results" from "first run". They look similar and mean opposite things; the copy must make the difference obvious.