Empty states are your second chance at onboarding

Every user, on their first day, sees the empty state of every page in your product. The empty inbox, the empty project list, the empty dashboard. These are the pages where the user is most engaged with your product and least sure what to do next.

And most teams ship a centered icon, the text "No items yet", and a button that says "Create". This is the visual equivalent of a shrug. The user shrugs back and bounces.

What empty states are for

An empty state is the second chance at onboarding. The first chance was the marketing site, which convinced them to sign up. The empty state is what convinces them to invest the next ten minutes, to upload data, invite a teammate, or take the first action that turns the product from a demo into a tool they use.

Done right, the empty state is the most important page in the product. Done wrong, it's the silent killer of activation rates.

The four-part anatomy

1. 01A specific headline. Not "No data". Not "Empty". Tell the user what would normally live here, in human language. "No invoices yet." "Your team hasn't shared any documents." Specificity establishes context.
2. 02One sentence of guidance. What would the user have to do to get something to appear here? "Create an invoice from the Customers tab to start tracking payments." This is the line most empty states skip, and it's the most important one.
3. 03A primary CTA that does the thing. Not a link to docs. Not a button labeled "Learn more". The button should kick off the action, "Create invoice" opens the create modal, doesn't navigate to a help page.
4. 04A secondary path for browsers. A small link to a demo, a sample dataset, or a 90-second video. For users who aren't ready to act, give them a way to look around without committing.

When the illustration helps

Empty states often ship with a friendly illustration of a paperclip, a magnifying glass, a cloud. These are mostly noise. They occupy space that the headline and CTA need, they age badly (every illustration trend ages), and they signal this is the empty state template rather than this is where your invoices will live.

Use illustrations when they convey product-specific information, a stylized preview of what the populated page will look like, with placeholder data dimmed. This shows users what they're working toward. Generic illustrations don't.

The states beyond zero

There are actually three flavors of "empty", and most teams design only one of them.

First-run empty (no data yet)

The classic onboarding moment. This is where the four-part anatomy above applies. Lean heavy on guidance.

Filtered empty (no matches)

The user applied filters and got zero results. Different problem, they're not learning the product, they're hunting for something. Ship: a recap of which filters are active, a single "Clear filters" button, and a hint about what is in the dataset ("3,400 invoices total").

Error empty (something failed)

The page tried to load and failed. This isn't an empty state, it's an error state, and conflating them is a common mistake. Ship: a specific error message, a retry button, and a link to status if you have one. Never silently show the first-run empty state on a network error.

Build them right

The empty states entry in the directory has the anatomy and tuned prompts for first-run, filtered, and error variations. Pair with the dashboard and forms entries, most of the empty states in your product live inside one of those two surfaces.