Home/Blocks/Empty state

Empty state

When a list, table, or detail page has nothing to show. The empty state is a chance to teach without being annoying.

Stable .empty 1 sentence rule

First-time empty

Show the user what this surface will look like when it has data, plus a single primary action.

No receipts yet today

Receipts appear here as cashiers ring up sales. Open a till to start.

First-time empty

No search results

A filter narrowed the list to zero. Tell the user what their query was and how to relax it.

No students match "Mukamba"

Try a partial name or check the form filter.

No-results empty

Error empty

When loading fails. Plain language, a real reason, and one path forward.

Couldn't reach refinery

Last sync 14 minutes ago. The connection times out after 30 s.

Error empty

Inline / small

A one-row empty inside a small panel. No icon, no button — just a line of muted text.

Today’s exceptions
Last check: 14:30
No exceptions today — the queue is clear.
Small inline empty

Do & don't

Do

Tell the user what they’re looking at and what they can do next. One sentence each.

Don't

Show a smiling illustration with "Nothing here yet :)". Operators don’t need encouragement.

Do

Use real product nouns. "No receipts" beats "Nothing to show".

Don't

Hide the empty state when filters are active. The user needs to see they filtered too aggressively.