Feedback

Empty state

The default for any list, table, or search result with no rows: what is empty, when content appears, and the one action that fixes it.

.empty · .empty__title · .empty__text · .empty__action · composes .card and .btn

<div class="card empty" style="max-width:28rem">
  <p class="empty__title">No transactions match this filter</p>
  <p class="empty__text">Risk holds from the last 24 hours will appear here.</p>
  <button class="btn btn--secondary empty__action">Clear filter</button>
</div>

<div class="card empty" style="max-width:28rem">
  <p class="empty__title">No terminals yet</p>
  <p class="empty__text">Provision the first terminal to start seeing fleet health.</p>
  <button class="btn btn--primary empty__action"><svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Provision a terminal</button>
</div>

<div class="card empty" style="max-width:28rem">
  <p class="empty__title">Nothing to show</p>
  <p class="empty__text">This view is empty for now. It will fill once there is something to report.</p>
</div>

Usage

• .empty composes .card: bordered surface, centred, and min-height:14rem so the block holds the space the rows would have filled instead of collapsing the page.
• Plain text plus one action. No illustration, no emoji, no decoration — the empty state is information, not a mascot moment.
• First line says what is empty; second line says when content will appear or what to do; the button does it. Keep the second line to two lines at most — .empty__text caps its measure at 34ch.
• A filter-produced empty offers to clear the filter (secondary); a first-run empty offers the creating action (primary, if it is the view's one primary). When there is no action to offer, drop .empty__action entirely rather than inventing one.
• Never show an empty state while loading; that is the skeleton's job. Never an empty state on an error — that is an alert.