Empty state

wu-empty-state fills an empty list, table or search result with a centered message and the next step.

Class	Effect
`wu-empty-state`	Root. Centered column with generous padding
`wu-empty-state-icon`	Part, `aria-hidden="true"`. Soft circle for the app’s own icon; left empty, it draws an empty box
`wu-empty-state-title`	Part. Heading
`wu-empty-state-text`	Part. Explanation, at most 40 characters wide
`wu-empty-state-actions`	Part. Centered row of buttons
`dashed`	Dashed border with a large radius
`sm`	Compact, for use inside a card, panel or table
`success`, `warning`, `danger`, `info`	Result: tints the icon slot; left empty, it draws a check, a triangle, an octagon or a circle

Default

The icon slot takes the app’s own icon, such as an <img> or an icon font glyph. Left empty, it draws a calm empty-box shape.

No projects yet

Projects collect your tasks, files and members in one place.

<div class="wu-empty-state">
  <span class="wu-empty-state-icon" aria-hidden="true"></span>
  <h3 class="wu-empty-state-title">No projects yet</h3>
  <p class="wu-empty-state-text">Projects collect your tasks, files and members in one place.</p>
  <div class="wu-empty-state-actions">
    <button class="wu-btn" type="button">Import</button>
    <button class="wu-btn brand" type="button">New project</button>
  </div>
</div>

Dashed

Drop files here

PDF, PNG or JPG, up to 10 MB each.

<div class="wu-empty-state dashed">
  <h3 class="wu-empty-state-title">Drop files here</h3>
  <p class="wu-empty-state-text">PDF, PNG or JPG, up to 10 MB each.</p>
</div>

Compact

Invoices

No invoices

Invoices appear after the first payment.

<div class="wu-panel">
  <div class="wu-panel-header"><h3 class="wu-panel-title">Invoices</h3></div>
  <div class="wu-empty-state sm">
    <span class="wu-empty-state-icon" aria-hidden="true"></span>
    <h4 class="wu-empty-state-title">No invoices</h4>
    <p class="wu-empty-state-text">Invoices appear after the first payment.</p>
  </div>
</div>

Results

For the outcome of a submission or an error page, add a role. The icon slot takes the role tint, and when it is empty it draws the same marker shape as the alert: a check for success, a triangle for warning, an octagon for danger and a circle for info. The title text carries the meaning; the shape repeats it, so the result does not rely on color alone.

Payment received

A receipt is on its way to your inbox.

Import finished with warnings

Some rows were skipped. Review them before you continue.

Payment failed

Your card was declined. Try another card.

Request submitted

We reply within one business day.

<div class="grid cols-1 cols-2@md gap-4">
  <div class="wu-empty-state success">
    <span class="wu-empty-state-icon" aria-hidden="true"></span>
    <h3 class="wu-empty-state-title">Payment received</h3>
    <p class="wu-empty-state-text">A receipt is on its way to your inbox.</p>
    <div class="wu-empty-state-actions">
      <button class="wu-btn brand" type="button">View order</button>
    </div>
  </div>
  <div class="wu-empty-state warning">
    <span class="wu-empty-state-icon" aria-hidden="true"></span>
    <h3 class="wu-empty-state-title">Import finished with warnings</h3>
    <p class="wu-empty-state-text">Some rows were skipped. Review them before you continue.</p>
  </div>
  <div class="wu-empty-state danger">
    <span class="wu-empty-state-icon" aria-hidden="true"></span>
    <h3 class="wu-empty-state-title">Payment failed</h3>
    <p class="wu-empty-state-text">Your card was declined. Try another card.</p>
    <div class="wu-empty-state-actions">
      <button class="wu-btn" type="button">Try again</button>
    </div>
  </div>
  <div class="wu-empty-state info">
    <span class="wu-empty-state-icon" aria-hidden="true"></span>
    <h3 class="wu-empty-state-title">Request submitted</h3>
    <p class="wu-empty-state-text">We reply within one business day.</p>
  </div>
</div>

Load only the empty state

@use "@wovenui/components/empty-state";

The empty state needs no other component. The examples above also use the button and the panel.