kit

Empty state

What a list or view shows before there's anything in it, saying why it's empty and what to do next.

Tier 1 · CSS only Content preview

Example

Nothing here yet

Supporting text says what will appear here and how to start.

Show the markup 
<div class="kit-empty">
  <span class="kit-empty-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M6 3.5h9l3 3V20a.5.5 0 0 1-.5.5h-11A.5.5 0 0 1 6 20V3.5Z"/><path d="M9 11h6M9 14.5h6M9 7.5h3"/></svg></span>
  <p class="kit-empty-title">Nothing here yet</p>
  <p>Supporting text says what will appear here and how to start.</p>
  <div class="kit-empty-actions"><button class="kit-button" data-variant="primary" type="button">Primary action</button><button class="kit-button" data-variant="ghost" type="button">Secondary action</button></div>
</div>

Usage

Say what would be here and how to get it there, in that order: "No invoices yet" then "Invoices you send appear here", then the action. Keep one primary action; a second, quieter one is fine.

An empty search result is different from an empty list: say what was searched for and offer to clear the filters.

Accessibility

  • The title is plain text, not a heading, so it doesn't disturb the page outline; use a heading of the right level if the empty state is the main content of a section.
  • The icon is decorative (aria-hidden="true").
  • When a list empties as the result of an action (the last item deleted), announce it.