Feedback

EmptyState

Centered placeholder with optional icon, title, description, and call-to-action for views that have no data to render.

import { EmptyState } from '@lostgradient/cinder/empty-state';
feedbackempty
01

Overview

Placeholder layout for zero-data views, with optional illustration, heading, and action.

Usage

svelte 
<script lang="ts">
  import EmptyState from '@lostgradient/cinder/empty-state';
</script>

<EmptyState />
Live preview
02

When to use

Use when
  • Communicating that a list, table, or workspace has no items yet and suggesting a next step.
  • Replacing a primary content region after a filter or search returns no results.
Avoid when
  • Indicating that data is still loading — use skeleton or spinner instead.
  • Reporting a transient error — use alert, banner, or toast-region.
03

Examples

Basic empty state

Title, description, and an action button.

With icon

An icon snippet above the title.

04

Props

Props for empty-state
Name Type Default Required Bindable Description
title text req Primary heading text rendered as a heading element at the configured headingLevel.
description text Secondary descriptive text rendered as a paragraph below the title.
headingLevel 123456 3 Heading level for the title element.
icon snippet
action snippet