Skip to content
1 viewer
Component · Feedback

EmptyState

What a list, table or page shows when it has nothing yet: a short title, an optional explanation, and optional next actions as children.

Category
Feedback
Slots
4
States
2
Writer
Shared
cre8.primitive.empty-state

Preview

Live renderShared SSR + WASM writers

No orders yet

Orders appear here once a buyer checks out.

Open storefront
<EmptyState
  body="Orders appear here once a buyer checks out."
  title="No orders yet"
>
  <Action href="/view/shops" label="Open storefront" />
</EmptyState>

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.primitive-empty-state
title.primitive-empty-state__title
body.primitive-empty-state__body
actions.primitive-empty-state__actions
4 rows
Modifier
primitive-empty-state--{intent}
State attribute
data-intentfrom the intent prop

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
neutralerror
Platforms
webruntime-node
Recipes
unstyledruntime-console

Renderers

Shared writer
EmptyState renders through the one writer the server and the WASM DOM share, so both emit the same markup.

Every tag in the example above renders through a shared writer.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
runtime-nodeview-nodeready
ssrhtml-semanticready
terminalterminal-textplanned
4 rows

Accessibility

Plain text in document flow; not a live region and not a heading.

  • The title is a paragraph, so an empty state never adds a heading level to the outline.
  • The error intent is carried by its words as well as its color.
  • Action children are real links or buttons, reachable in reading order after the text.