JM Family Design System

Generic empty-state copy that says nothing

mediumContent & Voicevoiceempty-statecopypatterns

Empty states that say only "No data" or "No items found" leave users unsure what belongs there or what to do next.

The wrong way

Naming the database condition instead of the user's product context.

tsxdo not copy
<section>
  <h2>No data</h2>
  <p>There are no items to display.</p>
</section>

Why

A generic empty state sounds harmless, but it removes the one moment where the product can teach the user what the surface is for. It also makes absence feel like a system failure. The user needs to know what would normally appear here and which action will move the workflow forward.

The right way

Name the missing object, explain what will appear here, and offer the next recoverable action.

tsx
<section aria-labelledby="vendors-empty-title">
  <Icon name="inbox" aria-hidden="true" />
  <h2 id="vendors-empty-title">No vendors on your watchlist yet</h2>
  <p>Add vendors you want to track. You will see their status, insurance, and recent jobs here.</p>
  <Button>Add a vendor</Button>
</section>

Related

Added in 1.1.0Last reviewed 2026-05-20