StellarUI

<stellar-empty-state>

Centered empty-state layout for first-run moments, missing content, and no-results screens, following the component's slot-based composition.

Example Properties

Preview

The component does layout work, not content work. It centers the message, constrains line length, and sizes the optional illustration slot so you do not have to hand-tune that structure every time.

Raw content in a container

No matches for “roadmap”

Try a broader search, clear one of the filters, or create a new project if this is your first item.

Create project

Clear filters

Same content with <stellar-empty-state>

No matches for “roadmap”

Try a broader search, clear one of the filters, or create a new project if this is your first item.

Create project

Clear filters

Markup

Copy

<stellar-empty-state>
  <stellar-icon slot="illustration" name="mdi:inbox-outline"></stellar-icon>
  <h4>No matches for “roadmap”</h4>
  <p>Try a broader search, clear one of the filters, or create a new project if this is your first item.</p>
  <stellar-button appearance="soft" tone="primary">Create project</stellar-button>
</stellar-empty-state>

API

Complete props, events, slots, and implementation notes for the shipped empty-state surface.

Props

Prop	Type	Default	Notes

Events

Event	Source	Notes

Slots

Slot	Notes
default	Main copy and actions. Headings, paragraphs, and one or two buttons are the intended composition.
`illustration`	Optional leading visual. Works well with an image, illustration, or `stellar-icon`.

Notes

The public tag is `stellar-empty-state`, matching the component's simple empty-state wrapper rather than inventing title, body, or CTA props.
The shipped surface is intentionally slot-driven: author the content you want in the default slot and optionally provide an illustration in the named `illustration` slot.
The component's value is layout consistency: it centers the state, constrains the content width, and keeps the optional illustration visually proportional.
The preview now shows that value directly by comparing raw slotted content against the same content wrapped in `stellar-empty-state`.
The component is purely presentational and emits no events.
The surrounding container, not the component itself, usually decides the available height and panel chrome for page sections, cards, and search results.
There are no element props by design, but the API section documents the supshipped CSS custom properties: `--content-width` and `--illustration-width`.