EmptyState

Empty / error placeholder.

A centered placeholder for empty or error states, with an optional icon, message, and action.

Demo

Demo loads from http://localhost:6006. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { EmptyState, Button } from 'dssoca';
</script>

<EmptyState title="No services yet" message="Add one to get started." icon="grid">
  {#snippet action()}
    <Button variant="primary">+ add</Button>
  {/snippet}
</EmptyState>

Props

Prop	Type	Default	Description
`variant`	`'empty' \| 'error'`	`'empty'`	Tone of the placeholder.
`title`	`string`	—	Heading text.
`message`	`string`	—	Supporting message.
`icon`	`string`	—	Icon name.
`action`	`Snippet`	—	Action slot (e.g. a button).
`headingLevel`	`number`	`2`	Heading level for the title.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.