Empty state
Shown when a list, table or search has nothing to display. Explains why and offers the next step.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
No projects found
Your search “Landing page design” did not match any projects. Please try again.
<div class="px-empty">
<span class="px-empty__icon"><svg class="px-icon" aria-hidden="true">…</svg></span>
<h3 class="px-empty__title">No projects found</h3>
<p class="px-empty__desc">Your search “Landing page design” did not match any projects. Please try again.</p>
<div class="px-empty__actions"><button type="button" class="px-btn px-btn--secondary-gray">Clear search</button><button type="button" class="px-btn"><svg class="px-icon" aria-hidden="true">…</svg>New project</button></div>
</div>Usage
- Small for panels and tables, Large for full pages.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-empty · px-empty--lg | class | Size. |
__icon · __title · __desc · __actions | class | Slots. |
Figma properties
Empty state4 variants · page “Empty States”Open
Shown when a list, table or search has nothing to display. Explain why and offer the next action. Small for panels and tables, Large for full pages.
| Property | Type | Values |
|---|---|---|
| Title | Text | “No projects found” |
| Description | Text | “Your search “Landing page design” did not match any projects. Please try again.” |
| Actions | Boolean | — |
| Size | Variant | Small Large |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-empty-state-icon-background | color-background-brand-subtle | #eff6ff |
--px-empty-state-icon-content | color-content-brand-default | #2563eb |
--px-empty-state-title | color-content-neutral-primary | #101828 |
--px-empty-state-body | color-content-neutral-secondary | #475467 |
Accessibility
- Use a heading so people can find it.