Empty state
Preview Available in release assets
Explain why a view has no content and offer the next useful action, in place of the missing list or table.
Empty state primary example
<section class="thin-empty-state" aria-labelledby="no-orders">
<h2 id="no-orders">No orders yet</h2>
<p>Orders appear here after checkout.</p>
<a href="/products/">Browse products</a>
</section>Show code
<section class="thin-empty-state" aria-labelledby="no-orders">
<h2 id="no-orders">No orders yet</h2>
<p>Orders appear here after checkout.</p>
<a href="/products/">Browse products</a>
</section>Variant gallery
Each authored example uses the production assets and includes copyable markup.
First use
The action starts the task that fills the view.
<section class="thin-empty-state" aria-labelledby="no-orders">
<h2 id="no-orders">No orders yet</h2>
<p>Orders appear here after checkout.</p>
<a href="/products/">Browse products</a>
</section>Show code
<section class="thin-empty-state" aria-labelledby="no-orders">
<h2 id="no-orders">No orders yet</h2>
<p>Orders appear here after checkout.</p>
<a href="/products/">Browse products</a>
</section>No results and error recovery
A filtered view clears its filters; an error offers a retry.
<div class="thin-stack">
<section class="thin-empty-state" aria-labelledby="no-match">
<h2 id="no-match">No invoices match</h2>
<a href="/invoices/">Clear filters</a>
</section>
<section class="thin-empty-state" aria-labelledby="load-failed">
<h2 id="load-failed">Invoices could not load</h2>
<form method="get">
<button class="thin-button" type="submit">Try again</button>
</form>
</section>
</div>Show code
<div class="thin-stack">
<section class="thin-empty-state" aria-labelledby="no-match">
<h2 id="no-match">No invoices match</h2>
<a href="/invoices/">Clear filters</a>
</section>
<section class="thin-empty-state" aria-labelledby="load-failed">
<h2 id="load-failed">Invoices could not load</h2>
<form method="get">
<button class="thin-button" type="submit">Try again</button>
</form>
</section>
</div>Anatomy
- section.thin-empty-state with an accessible name
- Heading that names the empty view
- Short explanation
- Optional link or form for the next action
Variants and sizes
- First use — shown above
- No results after filtering — shown above
- Error recovery — shown above
States and difficult content
Rendered fixtures exercise authored content and constrained layouts with the same production assets.
Localized and narrow
Long copy wraps inside a narrow container.
<div style="max-inline-size: 18rem">
<section class="thin-empty-state" lang="de" aria-labelledby="leer">
<h2 id="leer">Noch keine Bestellungen vorhanden</h2>
<p>Bestellungen erscheinen hier nach dem Bezahlvorgang.</p>
</section>
</div>Show code
<div style="max-inline-size: 18rem">
<section class="thin-empty-state" lang="de" aria-labelledby="leer">
<h2 id="leer">Noch keine Bestellungen vorhanden</h2>
<p>Bestellungen erscheinen hier nach dem Bezahlvorgang.</p>
</section>
</div>- Long localized copy — shown above
- Narrow container — shown above
- Right-to-left reading direction — shown above
- Forced colors — shown above
Interaction and keyboard behavior
Actions are ordinary links or forms. A filtered view offers a link that clears the filters.
Accessibility
Name the section with its heading and keep the explanation as text. Do not rely on an illustration to say the view is empty.
- Contract
NATIVE- Basis
- Styles native HTML elements; no APG widget
API
Use section.thin-empty-state with a heading, a sentence, and an optional action link or button.
Behavior tier: css-only
Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.
Fallback
Without CSS the heading, explanation, and action remain in document order.
Assets and dependencies
/components.css
Dependencies: None
Source: packages/ui/src/items/empty-state/style.ts