Empty State

Demo & usage

More examples

<!-- The FIRST action is primary and the rest are secondary unless they
     say otherwise. Three primary buttons side by side is no hierarchy:
     the user reads all three to find the one the page expects. -->
<sv-empty-state
  icon="folder"
  title="No projects yet"
  message="Create your first project to get started."
  [actions]="emptyActions"
  (actionClick)="create()" />

<!-- "Nothing here yet" when the user has filtered is a lie that reads
     as a bug: it tells a customer with 4,000 orders they have none
     because they mistyped a search term - and the cheerful inbox glyph
     agrees with it.

     Pass the filters and the copy becomes "No matching results", the
     glyph becomes a search, and the filters themselves are echoed with
     one button to drop them. The reason is inferred from them, so the
     mistake of echoing filters under "Nothing here yet" is impossible. -->
<sv-empty-state
  [activeFilters]="activeFilterLabels()"
  (clearFilters)="resetFilters()"
  [actions]="emptyActions"
  (actionClick)="create()" />

<!-- An error and a permission wall are not empty containers either;
     each gets its own copy and glyph. -->
<sv-empty-state reason="error" />
<sv-empty-state reason="no-access" />

When to use

• Communicating that a list, search or section has no content — and what to do next.
• First-run states, empty searches, cleared inboxes.
• For load failures specifically, use the Result component (error status).

Async states

• retry
• offline

Outputs

Customization & theming

• Inline or full-page layout.
• Icon, title, description and actions.
• `reason` (`no-data` · `no-results` · `error` · `no-access`) picks the copy AND the glyph when you do not state them — a cheerful inbox over "no matching results" says "you have nothing" when the truth is "your filters match nothing". Passing `[activeFilters]` infers `no-results` by itself.
• `[activeFilters]` echoes the filters narrowing the list, as chips, with a `(clearFilters)` button beside them: "No matching results" is unanswerable on its own, and the filter hiding everything is usually one the user set three screens ago. Strings rather than a filter model, because only the host can render a date range as words a person recognises.
• Action hierarchy by position: the first action is primary, the rest secondary, unless an action states its own `style`.
• 12 built-in icon presets, or `icon="custom"` with `customIcon` naming any icon-library glyph.
• Custom illustration slot.

Best practices

• Do: Name the cause in the copy, because the component cannot: first-use, no-results-for-this-filter, no-permission and error look identical today (one neutral palette, one decorative icon, `role="region"`). "Nothing here yet" is right for exactly one of those four and actively misleading for the other three.
• Do: For a filtered zero, echo the active filters and offer to clear them. It is the difference between a dead end and one click.
• Do: Pair the empty message with a clear primary action to move forward.
• Do: Distinguish "no data yet" from "no results for this filter".
• Don't: Don't leave a blank area — an empty state reassures users nothing is broken.

Accessibility

• Clear heading hierarchy.
• Decorative icon hidden from assistive tech.
• Actions are labelled buttons/links.