Craft

Empty states are onboarding

The first thing a new user sees is nothing. The three-variant empty state — never used, cleared, and error — turns that nothing into a first lesson.

Beginner1 min read (computed · recorded 6)updated 2026-09-12empty-stateonboardingcopy

by Motif Editors

revised 2026-09-12 — First publication in bank-3 batch 4.

Key takeaways

— There are three empties: never used, cleared, and error.
— Each empty names cause, path and cost in one sentence.
— If you can't write the path, the feature doesn't have one.

Three empties, not one

A dashboard has at least three kinds of nothing: the user has never done the thing, the user did it and removed it, and the thing failed to load. Each needs its own sentence, because each implies a different next action. One generic illustration with 'No data yet' teaches none of them.

The catalog ships empty-state-trio precisely because the three cases kept being conflated: cause, text, and action are separate fields, and the action is a button, not a shrug.

The sentence is the design

A good empty state names the cause ('no saved components yet'), the path ('copy any component and it lands here'), and the cost ('a click'). If you cannot write the path, the feature has no path — and the empty state just told you.

empty-state-trio — the three causes as a component →

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.

Empty-state Triopractice Empty Table Statepractice Success-state Celebrationpractice

Keep learning

All guides Try the interactive Lab