Empty State

A placeholder for when there is nothing to show, using the .empty class.

Works with

Button: Actions, like create or upload

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/empty.css" />

Default

No items yet

There's nothing here. Add something to get started.

<section class="empty">
  <svg><!-- icon --></svg>
  <h3>No items yet</h3>
  <p>There's nothing here. Add something to get started.</p>
</section>

With action

Add a button or link to give the user a clear next step.

No documents

Create your first document to get started.

<section class="empty">
  <svg><!-- icon --></svg>
  <h3>No documents</h3>
  <p>Create your first document to get started.</p>
  <button>New document</button>
</section>

With link

Use an <a> when the action navigates somewhere.

No images uploaded

Visit the media library to upload and manage your images.

Go to media library

<section class="empty">
  <svg><!-- icon --></svg>
  <h3>No images uploaded</h3>
  <p>Visit the media library to upload and manage your images.</p>
  <a href="/media" class="button">Go to media library</a>
</section>

Use a <footer> when you need multiple actions.

No results found

Try adjusting your search or filters to find what you're looking for.

<section class="empty">
  <svg><!-- icon --></svg>
  <h3>No results found</h3>
  <p>Try adjusting your search or filters to find what you're looking for.</p>
  <footer>
    <button class="outlined">Clear filters</button>
    <button>New item</button>
  </footer>
</section>