EmptyState
A named region distinguishing an empty dataset from a query with no matches.@gemologic/sheen · data-displayPlayground
Nothing here yet
Try a different symbol.
<EmptyState kind="no-results" description="Try a different symbol." kind="empty"><Button onClick={() => {}}>Clear filters</Button></EmptyState>Variant matrix
No filter matches
No results
Try a different symbol.
kind: empty
Nothing here yet
Try a different symbol.
kind: no-results
No results
Try a different symbol.
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/EmptyState.tsx- Tokens
--sheen-color-fg--sheen-color-fg-muted--sheen-text-h4-size--sheen-space-section
Accessibility
Role: region, named by the visible heading unless explicitly overriddenKeyboard: Tab reaches app-supplied actions in DOM orderDo
- Supply app-owned actions through children, such as clearing filters or creating the first item.
- Use no-results only after the query completes successfully with zero matches.
Do not
- Do not render an empty state for loading, refresh, permission denial, or transport errors.
- Do not steal focus or automatically announce the entire region. The app owns result-status announcements.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
kind | "empty" | "no-results" | empty | Select the localized empty or no-results default heading. |
heading | string | — | Override the localized visible heading without assuming a document heading level. |
description | string | — | Optional explanation or recovery instructions below the heading. |