08

Empty States

An empty screen says what is missing and offers the one next action.

An empty screen still has a job. It says what is missing, and it offers the one next action. "No invoices yet" is the absence. "Create the first one when a client is ready." says when to act. The button says "New invoice", the same verb the filled screen uses.

The failure is a picture standing in for that sentence, or a chart and sample rows that were never real. Fake data teaches the wrong screen, and a person may try to read it or click it. Use the same type roles as the filled screen: a title, a short supporting line, and one button. If the filled screen is quiet, the empty screen is quiet too.

The demo is that panel and nothing else. There is no illustration and no invented chart beside the words.

How to check it

  • Read only the text. You can say what is missing and what to do next.
  • Count the actions. There is one, and its label matches a real control on the filled screen.
  • Compare type with a screen that has invoices. The title, the line, and the button match those roles.
<section>
  <h2>No invoices yet</h2>
  <p>Create the first one when a client is ready.</p>
  <button type="button">New invoice</button>
</section>