Empty state

How to use it

Use where a list, table or search has nothing to show, to say why and offer the one most useful next step -- clearing filters, creating the first item. Write the message for the specific situation ("No invoices match these filters", not "No data") and wire the button to your own handler. When content is still loading show a loader instead, and when the request failed use the error panel.

Accessibility

A <section> named by its heading, so the empty result is a clearly announced part of the page rather than just a blank area; the illustration is an aria-hidden inline SVG. The single action is a native <button> with its purpose in its text, reachable with Tab and shown with a 2px #1d4ed8 outline on focus. Heading #0f172a and body #475569 on #f8fafc are 17.1:1 and 7.2:1, and the white button text on #1d4ed8 is 6.7:1 (8.7:1 hovered on #1e40af).

Source (copy-ready)

Copy code

<section class="dcl-emptystate" aria-labelledby="dcl-emptystate-title">
  <svg class="dcl-emptystate__art" viewBox="0 0 64 64" aria-hidden="true" focusable="false"><rect x="10" y="8" width="36" height="46" rx="4" fill="#e2e8f0"/><rect x="17" y="18" width="22" height="4" rx="2" fill="#94a3b8"/><rect x="17" y="27" width="16" height="4" rx="2" fill="#94a3b8"/><circle cx="42" cy="42" r="10" fill="#f8fafc" stroke="#475569" stroke-width="4"/><path d="M49 49l7 7" stroke="#475569" stroke-width="4" stroke-linecap="round"/></svg>
  <h3 class="dcl-emptystate__title" id="dcl-emptystate-title">No invoices match these filters</h3>
  <p class="dcl-emptystate__text">Try a wider date range, or clear the filters to see all 42 invoices.</p>
  <button type="button" class="dcl-emptystate__action">Clear all filters</button>
</section>
<style>
.dcl-emptystate { box-sizing: border-box; max-width: 28rem; padding: 2rem 1.25rem; border: 1px dashed #94a3b8; border-radius: 0.5rem; text-align: center; font: inherit; color: #0f172a; background-color: #f8fafc; }
.dcl-emptystate__art { width: 4rem; height: 4rem; }
.dcl-emptystate__title { margin: 0.75rem 0 0.375rem; font-size: 1.125rem; color: #0f172a; background-color: #f8fafc; }
.dcl-emptystate__text { margin: 0 0 1.25rem; color: #475569; background-color: #f8fafc; }
.dcl-emptystate__action { padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; font: inherit; font-weight: 600; cursor: pointer; color: #ffffff; background-color: #1d4ed8; }
.dcl-emptystate__action:hover { color: #ffffff; background-color: #1e40af; }
.dcl-emptystate__action:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
</style>