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.

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

Playground

Props in the URL.

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

Loading playground.

States

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

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

Default

Blank-slate message with action.

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

Small

Compact empty state.

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

Sky

Sky-accented empty state.

Props

Name	Type	Default	Description
`title *`	`ReactNode`	-	Primary blank-state message.
`body`	`ReactNode`	-	Muted explanation.
`icon`	`IconName \| ReactElement`	`search`	Glyph inside the dashed mark tile.
`size`	`'small' \| 'medium' \| 'large'`	`medium`	Mark tile scale.
`tone`	`'default' \| 'sky'`	`default`	Default ink or sky mark treatment.
`action`	`ReactNode`	-	Optional CTA row.