EmptyState

Empty / error / no-results placeholder.

A centred placeholder for empty, error, or no-results states, with a decorative glyph or `visual` snippet, a message, and primary/secondary actions plus a low-emphasis footer. `compact` and `fullWidth` density options; the title heading level is configurable (or `false` for a plain paragraph). Errors announce assertively, others politely.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. 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}
  {#snippet secondaryAction()}
    <Button variant="ghost">import</Button>
  {/snippet}
</EmptyState>

HTML

CSS only — static markup The exact markup the component renders, generated at build time. Use it with dssoca/vanilla.css — see Plain HTML & CSS.

html

<div class="ss-empty empty" role="status" aria-atomic="true">
  <div class="ic glyph" aria-hidden="true">⌕</div>
  <p class="title" role="heading" aria-level="2">No results</p>
  <p class="msg">Try another query.</p>
</div>

Props

Prop	Type	Default	Description
`variant`	`'empty' \| 'error' \| 'no-results'`	`'empty'`	Tone of the placeholder (error → role="alert").
`title`	`string`	—	Required. Heading text.
`message`	`string`	—	Supporting message.
`icon`	`string`	—	Decorative glyph fallback when no `visual` snippet is given.
`visual`	`Snippet`	—	Visual slot — drop in an <Icon>, illustration or <img> (rendered aria-hidden).
`action`	`Snippet`	—	Primary action slot (e.g. a button).
`secondaryAction`	`Snippet`	—	Secondary, lower-emphasis action beside the primary one.
`footer`	`Snippet`	—	Low-emphasis footer (tertiary links) below everything.
`ariaLabel`	`string`	—	Accessible name for the live region — distinguishes multiple status/alert regions on one page. Optional; the visible `title` already provides the content.
`headingLevel`	`number \| false`	`2`	Heading level (aria-level); `false` renders a plain <p> with no heading role.
`compact`	`boolean`	`false`	Compact density — drops padding and shrinks the title for inline/cell use.
`fullWidth`	`boolean`	`false`	Remove the centred max-width cap and span the container.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.