Layout

EmptyState

A placeholder for empty views with an icon, a title, a description and actions.

<script>
  import { EmptyState, Button } from "@codeatlasdev/ui";
  import { Inbox } from "@lucide/svelte";
</script>

<EmptyState icon={Inbox} title="No messages yet" description="New messages will appear here.">
  {#snippet actions()}<Button size="sm">Compose</Button>{/snippet}
</EmptyState>

#167

Basic

Icon, title, description and a primary action.

No messages yet

Your inbox is empty. New messages will appear here.

Reference #167 · Pick in the gallery

Code

<script lang="ts">
  import { EmptyState, Button } from '@codeatlasdev/ui';
  import { Inbox } from '@lucide/svelte';
</script>

<EmptyState icon={Inbox} title="No messages yet" description="Your inbox is empty. New messages will appear here.">
  {#snippet actions()}
    <Button variant="filled" size="sm">Compose message</Button>
  {/snippet}
</EmptyState>

#170

No results

For searches and filters that match nothing.

No results found

Try adjusting your search terms or filters.

Reference #170 · Pick in the gallery

Code

<script lang="ts">
  import { EmptyState, Button } from '@codeatlasdev/ui';
  import { Search } from '@lucide/svelte';
</script>

<EmptyState icon={Search} title="No results found" description="Try adjusting your search terms or filters.">
  {#snippet actions()}
    <Button variant="outlined" size="sm">Clear filters</Button>
  {/snippet}
</EmptyState>

#171

Error or offline

Failed network requests and loading errors.

Couldn't load data

Check your connection and try again.

Reference #171 · Pick in the gallery

Code

<script lang="ts">
  import { EmptyState, Button } from '@codeatlasdev/ui';
  import { WifiOff } from '@lucide/svelte';
</script>

<EmptyState icon={WifiOff} title="Couldn't load data" description="Check your connection and try again.">
  {#snippet actions()}
    <Button variant="outlined" size="sm">Retry</Button>
    <Button variant="ghost" size="sm">Contact support</Button>
  {/snippet}
</EmptyState>

#168

Hero

A larger, brand-tinted tile with a glow. On mobile the actions stack full width, so put the primary one first.

Start your first project

Projects keep your sessions, contacts and settings in one place.

Reference #168 · Pick in the gallery

Code

<script lang="ts">
  import { EmptyState, Button } from '@codeatlasdev/ui';
  import { Inbox } from '@lucide/svelte';
</script>

<EmptyState variant="hero" icon={Inbox} title="Start your first project" description="Projects keep your sessions, contacts and settings in one place.">
  {#snippet actions()}
    <Button variant="filled">Create project</Button>
    <Button variant="ghost">Import</Button>
  {/snippet}
</EmptyState>

#169

No icon

A minimal version without an icon.

Nothing here yet

Create your first item to get started.

Reference #169 · Pick in the gallery

Code

<script lang="ts">
  import { EmptyState, Button } from '@codeatlasdev/ui';
  import { Plus } from '@lucide/svelte';
</script>

<EmptyState title="Nothing here yet" description="Create your first item to get started.">
  {#snippet actions()}
    <Button variant="filled" size="sm">
      {#snippet leading()}<Plus size={14} />{/snippet}
      Create item
    </Button>
  {/snippet}
</EmptyState>

Props

Prop	Type	Default	Description
`icon`	`IconComponent`	–	Lucide icon. Size and color are managed by the component.
`title`	`string`	–	Main title.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`2 inside PageShell/AppSettings/AppForm, 5 elsewhere`	Heading level of the title. Only the tag changes; the look stays on `.ca-empty__title`. Keeps the outline valid under the page's `<h1>`.
`variant`	`'default' \| 'hero'`	`'default'`	'default' is a compact inline state. 'hero' adds a larger brand-tinted icon tile with a glow and bigger title.
`description`	`string`	–	Supporting text.
`actions`	`Snippet`	–	Call-to-action buttons.
`children`	`Snippet`	–	Extra content below the description.
`class`	`string`	`''`	Extra class names.