State pattern · updated 3 Sept 2026
Empty state
An empty state is what an interface shows when there is nothing to show yet: no items, no results, no history. A good one names the situation in plain words, says what would fill it, and offers the one action that does so, instead of rendering a blank panel.
Think of it as
An empty parking space with a sign that says "Your car goes here" and points to the entrance, rather than a patch of tarmac.
Worked example
The showcase filter's empty state on this site says "No sites match that combination yet" and offers a single "Clear the filters" button. The decoder's design-system cards use a dash for a measurement with no data rather than a zero, because zero would be a claim.
Why it matters
Empty states are the first thing a new user sees in almost every product, and the place a design system most often forgets to specify. They also carry an honesty rule: an empty state that shows a made-up example row is presenting fiction as data.
How it fails
A blank white panel. A cheerful illustration with no action. Placeholder data that looks real. An error message where an empty message was meant.
What to measure open the decoder →
- Whether the empty panel contains a heading, a sentence and exactly one action
- Contrast of the muted explanatory text, which is usually set too light
- Whether the same tokens (radius, spacing) are used as in the filled state
Where you meet it
- Dashboards after signup
- Search with no results
- Inbox, cart and history views
On this site
Every measured surface here renders nothing rather than a placeholder when it has no data: the fetch counter on theme pages, the "Palettes near this colour" block, the most-fetched strip. That is the pattern applied to a site's own claims.
Showcase collections that exhibit it
Build it
Next rung
The empty state is one of several states a component has. The others (hover, focus, active, disabled) are what the decoder counts as state rules, and they are the next thing to check.