Empty
Empty (`<pura-empty>`) is a native web component for displaying empty states: a centered column with an optional icon, title, description, and action area. Use it when a list, search, or section has no content to show and you want to guide the user with a clear message and a next step. Regions without content are hidden automatically to keep the layout clean.
Preview
<pura-empty title="No results found">
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
Try adjusting the filters or searching for another term.
<pura-button slot="action" variant="primary">Clear filters</pura-button>
</pura-empty>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
title | string | — | Title text shown when the "title" slot is not used. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/empty.js"></script>import "./pura/lib/empty.js";