Empty
Display an empty state placeholder with an icon or avatar, title, description, and optional action buttons. Useful for empty lists, search results, and onboarding.
Playground
Experiment with different props in real-time.
You have no items in your inbox.
Basic Usage
Provide an icon, title, and description for a simple empty state.
You have no items in your inbox.
<script lang="ts">
import { Empty } from 'sv5ui';
</script>
<Empty
icon="lucide:inbox"
title="No items"
description="You have no items in your inbox."
/>Variants
Choose between solid, outline, soft, and subtle styling.
<Empty icon="lucide:inbox" title="Solid" variant="solid" />
<Empty icon="lucide:inbox" title="Outline" variant="outline" />
<Empty icon="lucide:inbox" title="Soft" variant="soft" />
<Empty icon="lucide:inbox" title="Subtle" variant="subtle" />Sizes
5 sizes from extra small to extra large.
<Empty icon="lucide:inbox" title="XS" size="xs" />
<Empty icon="lucide:inbox" title="SM" size="sm" />
<Empty icon="lucide:inbox" title="MD" size="md" />
<Empty icon="lucide:inbox" title="LG" size="lg" />
<Empty icon="lucide:inbox" title="XL" size="xl" />Colors
8 color schemes available.
<Empty icon="lucide:inbox" title="Primary" color="primary" />
<Empty icon="lucide:inbox" title="Secondary" color="secondary" />
<Empty icon="lucide:inbox" title="Tertiary" color="tertiary" />
<Empty icon="lucide:inbox" title="Success" color="success" />
<Empty icon="lucide:inbox" title="Warning" color="warning" />
<Empty icon="lucide:inbox" title="Error" color="error" />
<Empty icon="lucide:inbox" title="Info" color="info" />
<Empty icon="lucide:inbox" title="Surface" color="surface" />With Actions
Use the actions prop to add action buttons.
Try adjusting your search or filters.
<script lang="ts">
import { Empty } from 'sv5ui';
</script>
<Empty
icon="lucide:file-x"
title="No results found"
description="Try adjusting your search or filters."
actions={[
{ label: 'Clear Filters', variant: 'outline', color: 'surface' },
{ label: 'New Search', variant: 'solid' }
]}
/>With Avatar
Use the avatar prop instead of an icon for a personalized empty state.
Start a conversation to see messages here.
<script lang="ts">
import { Empty } from 'sv5ui';
</script>
<Empty
avatar={{ src: '/avatar.jpg', alt: 'User' }}
title="No messages"
description="Start a conversation to see messages here."
/>UI Slots
Use the ui prop to override classes on specific internal elements of the Empty.
| Slot | Description |
|---|---|
root | Root container — controls layout, background, border, padding |
icon | Icon element — controls icon size and color |
avatar | Avatar element — controls avatar styling when using avatar prop |
title | Title text — controls font size, weight, color |
description | Description text — controls font size and opacity |
actions | Actions container — controls layout and gap for action buttons |
Snippets
Use Svelte 5 snippets to customize specific parts of the Empty.
| Snippet | Type | Description |
|---|---|---|
leading | Snippet | Custom content replacing the icon/avatar area |
titleSlot | Snippet | Custom title content — overrides title prop |
descriptionSlot | Snippet | Custom description content — overrides description prop |
actionsSlot | Snippet | Custom actions content — overrides actions prop |
children | Snippet | Default slot for fully custom content |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | keyof HTMLElementTagNameMap | 'div' | |
icon | string | - | |
avatar | AvatarProps | - | |
title | string | - | |
description | string | - | |
actions | ButtonProps[] | - | |
color | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'info' | 'surface' | 'surface' | |
variant | 'solid' | 'outline' | 'soft' | 'subtle' | 'outline' | |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | |
class | string | - | |
ui | Record<Slot, Class> | - |