Empty
Empty state.
Try it
No results
Try another search.
Knobs
size tone <script> import { Empty } from 'omaris';</script><Empty title="No results" description="Try another search." />Walkthrough
1. Basic
An empty state should say what goes here and offer the way to make one.
No invoices yet
They will show up here the moment one is raised.
<script lang="ts"> import { Button, Empty } from 'omaris';</script><Empty class="w-full" bordered title="No invoices yet" description="They will show up here the moment one is raised."> {#snippet icon()} ... {/snippet} {#snippet actions()} <Button>New invoice</Button> {/snippet}</Empty>2. Sizes and tone
destructive is for a failure, not an absence — a search that errored.
No results
Try a different search.
Could not load orders
The request timed out.
<script lang="ts"> import { Button, Empty } from 'omaris';</script><div class="flex w-full flex-col gap-6"> <Empty size="sm" title="No results" description="Try a different search." /> <Empty bordered tone="destructive" title="Could not load orders" description="The request timed out." > {#snippet actions()} <Button variant="outlined" size="xs">Retry</Button> {/snippet} </Empty></div>