Empty state

A component rather than a table detail, because the same shape serves an empty table, an empty search, a fresh dashboard and a filtered list with no matches - and those should look like each other.

Reference

`sk-empty`

Write all three parts. An empty state that only says "No results" leaves the reader unsure whether the thing is broken, whether they did something wrong, or whether there is simply nothing yet. Title says what is true, body says why, action says what to do next.

<div class="sk-empty">
  <span class="sk-empty-icon">…</span>
  <p class="sk-empty-title">No invoices yet</p>
  <div class="sk-empty-body">They will appear here once you send one.</div>
  <div class="sk-empty-actions">…</div>
</div>

Attribute	Type	Default	Notes
`data-size`	`"sm"`	-	For inside a table cell or a small panel.
`data-align`	`"start"`	`center`	For an empty state in a column of left-aligned content.

Examples

Nothing yet

First run. The action is how to create the first one.

No invoices yet

They will appear here as soon as you send one.

Show markup

<div class="sk-card">
  <div class="sk-empty">
    <span class="sk-empty-icon">
      <svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path d="M12 5v14">
        </path>
        <path d="M5 12h14">
        </path>
      </svg>
    </span>
    <p class="sk-empty-title">
      No invoices yet
    </p>
    <div class="sk-empty-body">
      They will appear here as soon as you send one.
      <div class="sk-empty-actions">
        <button class="sk-button" type="button" data-variant="solid" data-size="md">
          <svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M12 5v14">
            </path>
            <path d="M5 12h14">
            </path>
          </svg>
          New invoice
        </button>
        <button class="sk-button" type="button" data-variant="quiet" data-size="md">
          Import
        </button>
      </div>
    </div>
  </div>
</div>

Nothing found

A filter or search returned nothing. The action is how to widen it - not how to create something.

No results for that search

Nothing matched those terms. Check the spelling, or search a wider date range.

Show markup

<div class="sk-card">
  <div class="sk-empty">
    <span class="sk-empty-icon">
      <svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <circle cx="11" cy="11" r="7">
        </circle>
        <path d="m20 20-3.5-3.5">
        </path>
      </svg>
    </span>
    <p class="sk-empty-title">
      No results for that search
    </p>
    <div class="sk-empty-body">
      Nothing matched those terms. Check the spelling, or search a wider date range.
      <div class="sk-empty-actions">
        <button class="sk-button" type="button" data-variant="neutral" data-size="md">
          Clear search
        </button>
      </div>
    </div>
  </div>
</div>

Small

For a table cell or a card.

Nothing to show

This panel fills in once the first run completes.

Show markup

<div class="sk-card">
  <div class="sk-empty" data-size="sm">
    <span class="sk-empty-icon">
      <svg class="sk-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <circle cx="12" cy="12" r="9">
        </circle>
        <path d="M12 11v5">
        </path>
        <path d="M12 8h.01">
        </path>
      </svg>
    </span>
    <p class="sk-empty-title">
      Nothing to show
    </p>
    <div class="sk-empty-body">
      This panel fills in once the first run completes.
    </div>
  </div>
</div>

Start aligned

No members in this team

Invite someone to get started.

Show markup

<div class="sk-empty" data-align="start">
  <p class="sk-empty-title">
    No members in this team
  </p>
  <div class="sk-empty-body">
    Invite someone to get started.
    <div class="sk-empty-actions">
      <button class="sk-button" type="button" data-variant="solid" data-size="sm">
        Invite
      </button>
    </div>
  </div>
</div>