Empty State

Displays a message and optional action when a section has no data or results.

Install

npx @vultra/cli add empty-state

Usage

<script>
  import { EmptyState, Button } from '@vultra/ui';
</script>

<EmptyState
  title="No results found"
  description="Try adjusting your search filters."
>
  <Button onclick={() => resetFilters()}>Clear Filters</Button>
</EmptyState>

Props

Prop	Type	Default	Description
title	string	‘No data’	Heading text
description	string	-	Supporting description text
class	string	-	Additional CSS classes

Slots

Slot	Description
default	Action buttons or custom content
icon	Custom icon above the title

Notes

• Often used inside tables, lists, or search results when data is empty.
• Include an icon slot for visual context.