DISPLAY

Empty

Empty gives a missing-data workflow a semantic Solar bold-duotone icon, useful copy, and one explicit next action. Its type selects the icon from the shared Icon catalog, so web, Android, and iOS stay visually aligned.

No saved views

Create a view to keep this workspace close at hand.

PLAYGROUND

Match the state to the job

The type selects a portable icon family. Keep the title and description specific, then choose either navigation or an action for the recovery path. The icon is resolved internally; use Icon separately only when a surrounding layout needs an additional visual cue.

SEARCH

No matching projects

Try a broader query or reset the filters.

TEMPLATE

Start from a template

Choose a starter surface before adding your own content.

Browse templates
dowe
Empty type:"result" title:"No matching projects" description:"Try a broader query or reset the filters." actionLabel:"Reset filters" onClick:retrySearch
Empty type:"template" title:"Start from a template" description:"Choose a starter surface before adding your own content." actionLabel:"Browse templates" href:"/docs/views"

ILLUSTRATION TYPES

Four states, one recovery pattern

Use the type as a semantic hint rather than a visual hack. Empty maps each type to a bundled Icon name, while the same action contract works for lists, search, datasets, and starter surfaces.

No playlist yet

Save content to build a queue.

No results

Change the query and search again.

No data

Connect a source to populate this view.

No template selected

Pick a starting point for this page.

Choose template

SHARED ICON CATALOG

Semantic mapping, target-native output

Empty reuses the same validated Solar bold-duotone geometry as Icon. The mapping is part of the component contract, not a private illustration implementation.

Type
Icon name
Use for

No data

There are no records to display

dowe
Empty type:"playlist" title:"No playlist yet" description:"Save content to build a queue." actionLabel:"Add content"
Empty type:"result" title:"No results" description:"Change the query and search again." actionLabel:"Search again"
Empty type:"data" title:"No data" description:"Connect a source to populate this view." actionLabel:"Connect source"
Empty type:"template" title:"No template selected" description:"Pick a starting point for this page." actionLabel:"Choose template"

ADVANCED WORKFLOWS

Make the next step obvious

FILTERED COLLECTION

Reset, do not dead-end

Use onClick when the parent page owns a local reset or query mutation.

NEW SURFACE

Navigate to a builder

Use href when the recovery step is a route and does not need local state.

COPY

Name the absence

A specific title and description help people understand whether to wait, search, create, or connect.

API

Props

Empty also accepts common spacing, sizing, visibility, border, radius, and accessibility props.

Prop
Type
Default

No data

There are no records to display