Empty State

A placeholder component displayed when there is no data or content to show.

Anatomy

<script>
  import { EmptyState } from "@saas-ui/svelte/components/empty-state";
  import { ShoppingCartIcon } from "lucide-svelte";
</script>

<EmptyState
  icon={ShoppingCartIcon}
  title="Your cart is empty"
  description="Explore our products and add items to your cart"
>
  <Button>Start Shopping</Button>
</EmptyState>

Examples

Alignment Accessibility

Use the align prop to change the alignment of the content.

<Stack gap={4} class="w-full">
	{#each emptyStateAlignOptions as align}
		<Box class="border-border-default rounded-md border">
			<EmptyState
				icon={Users}
				title="No team members"
				description="Invite people to collaborate on your project"
				colour="green"
				{align}
			>
				<Button variant="solid">Invite members</Button>
			</EmptyState>
		</Box>
	{/each}
</Stack>

Basic Accessibility

Basic EmptyState with icon, title, and description.

<EmptyState
	icon={ShoppingCart}
	title="Your cart is empty"
	description="Explore our products and add items to your cart"
	colour="indigo"
/>

Colours Accessibility

Use the colour prop to change the colour scheme.

<Stack gap={4} class="w-full">
	{#each colours as colour}
		<Box class="border-border-default rounded-md border">
			<EmptyState
				icon={ShoppingCart}
				title="Empty state with {colour}"
				description="This is a {colour} colored empty state"
				{colour}
				size="sm"
			/>
		</Box>
	{/each}
</Stack>

Sizes Accessibility

Use the size prop to change the size of the empty state.

<Stack gap={8} class="w-full">
	{#each emptyStateSizes as size}
		<Box class="border-border-default rounded-md border">
			<EmptyState
				icon={File}
				title="No documents"
				description="Upload your first document to get started"
				colour="blue"
				{size}
			/>
		</Box>
	{/each}
</Stack>

With Action Accessibility

EmptyState with action buttons.

<EmptyState
	icon={PaintBrush}
	title="Start adding tokens"
	description="Add a new design token to get started"
	colour="indigo"
>
	<Button variant="outline">Create token</Button>
	<Button variant="solid">Import</Button>
</EmptyState>

With List Accessibility

EmptyState with a list of suggestions.

<EmptyState
	icon={MagnifyingGlass}
	title="No results found"
	description="Try adjusting your search"
	colour="indigo"
>
	<List.Root variant="marker">
		<List.Item>Try removing filters</List.Item>
		<List.Item>Try different keywords</List.Item>
	</List.Root>
</EmptyState>

Props

Prop	Type	Default	Description
`size`	`sm \| md \| lg`	`md`	The size of the component.
`align`	`centre \| start \| end`	`centre`	The alignment of the empty state content.
`colour`	`accent \| gray \| zinc \| neutral \| stone \| slate \| red \| orange \| amber \| yellow \| lime \| green \| emerald \| teal \| cyan \| sky \| blue \| indigo \| violet \| purple \| fuchsia \| pink \| rose`	`gray`	The colour theme of the component.
`icon`	`boolean`	-	The icon to display.
`title`	`text`	-	The title text to display.
`description`	`text`	-	The description text to display.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.