Primitive

Empty state

Blank-slate composition with dashed glyph tile and terse copy.

Empty states should explain the absence and offer one next action when useful. Keep copy direct and avoid decorative illustration.
feedback
DOM renderImage render
Empty stateDefault

No matches

Try a broader keyword, or clear the filters applied to this view.

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Blank-slate message with action.

No matches

Try a broader keyword, or clear the filters applied to this view.

Render state

Compact

Compact empty state.

No matches

Try a broader keyword, or clear the filters applied to this view.

Render state

Sky

Sky-accented empty state.

No matches

Try a broader keyword, or clear the filters applied to this view.

Render state

Editorial

Larger explainer empty state.

No examples

No generated examples exist yet for this primitive family.

Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
title *ReactNode-Primary blank-state message.
bodyReactNode-Muted explanation.
iconIconName | ReactElementsearchGlyph inside the dashed mark tile.
density'compact' | 'comfortable' | 'editorial'comfortableFoundation-backed blank-state scale.
intent'neutral' | 'sky'neutralDefault ink or sky mark treatment.
actionReactNode-Optional CTA row.