Empty states are opportunities

Swap “No items” for an icon, a line on what goes here, and an action.

From refactoring-ui, after Refactoring UI by Adam Wathan and Steve Schoger.

Clear the list

Delete every project, then try to get one back.

“No items”Bad

Projects 3

    <p>No items</p>
    Icon, line, actionGood

    Projects 3

      icon · h4 · p · .btn
      <div class="empty">
  <svg class="empty-icon" aria-hidden="true">…folder + plus…</svg>
  <h4>No projects yet</h4>
  <p>Projects group the tasks, files and people for one piece of work.</p>
  <button class="btn">+ Create project</button>
  <button class="link">or restore the samples</button>
</div>

.empty      { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 32px 24px; }
.empty p    { max-width: 34ch; color: var(--muted); }
.empty .btn { margin-top: 8px; }

      Match the tone

      Switch the product, then press each button.

      Product
      Wrong toneBad

      Today

        Matched toneGood

        Today

          const EMPTY = {
  todo:  { title: "All clear.",
           body:  "Nothing left for today. Enjoy it, or jot down the next thing.",
           cta:   "Add a task" },
  audit: { title: "No audit events in the last 7 days",
           body:  "Events are recorded when members sign in, change permissions or export data. " +
                  "Widen the range to see older activity.",
           cta:   "Show last 90 days" },
};

          No results is not nothing yet

          Search “ana”, then “xyz”, then tick First run.

          One message for bothBad

          Contacts

            1 state
            One state per causeGood

            Contacts

              no-match · first-run
              function emptyState(all, query) {
  if (all.length === 0) return "first-run";
  if (query && matches(all, query).length === 0) return "no-match";
  return null;
}

              Why it matters, pros and cons

              Why it matters

              An empty screen is where a new user decides what to do next. Say what belongs here and offer the action that fills it.

              Pros

              • Teaches the feature when it is needed.
              • Puts the key action where eyes are.
              • No-match never reads as lost data.

              Cons

              • Every state is copy to write and translate.
              • Menus and table cells need one line, not art.
              • Playful copy around money or audits reads careless.