Skip to content
omaris

Data Display

Empty

Empty state.

import { Empty } from 'omaris'
Learn

Examples

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>

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>

When to use it

Use it for

  • Nothing created yet. title says what goes here and actions holds the one button that makes the first one.
  • No results from a search or filter. "Clear filters" is the action. size="sm" inside a card or panel.
  • A failed load. tone="destructive" tints the icon; "Retry" is the action.
  • An unfilled slot or a drop zone. bordered draws the dashed frame.

Not for

  • Data still loading → Skeleton in the shape of what is coming, or Progress when a fraction is known.
  • A problem with the whole page, like an outage or a permission → Alert above content that is still there.
  • A confirmation or a passing notice → Toast.
  • A table with no rows → the empty snippet on Table. It draws an Empty inside the frame; do not add a second one under it.

Do

  • Say what would be here and how to get one: "No orders yet — share your menu to take the first", not "No data".
  • Keep to one filled action. A second is text at most.
  • Pass your own icon when the default inbox is wrong for the noun: a pin for places, a receipt for orders.
  • Match size to the container: lg fills a route, md a card body, sm a sidebar panel.

Don't

  • Use destructive for an absence. An empty inbox is not an error; a search that threw is.
  • Pad it from outside. The vertical space is in size; mt-40 on a lg Empty puts the button below the fold.
  • Show it while filters are still applied without saying so. Table's noResultsText exists for that.
Pairs with Button Skeleton Table Card Alert

Quick reference

size
  • sm
  • md (default)
  • lg
tone
  • neutral (default)
  • destructive

API

Empty

Empty state.

The screen a dashboard spends more time showing than anyone plans for — no results, nothing created yet, a failed load. Giving it a component means those three read as one family instead of three improvisations.

import { Empty } from 'omaris'

Parts

Every element this renders is reachable from outside. Pass Tailwind for one part as classes={{ part: '…' }}; class covers the root and is merged last, so it always wins.

root
No description in the source yet.
icon
The icon sits in a tinted circle so it reads as deliberate.
title
No description in the source yet.
description
No description in the source yet.
actions
No description in the source yet.

Props

title
string
description
string
size

Defaults to 'md'

EmptySize
sm
md
lg
tone

Defaults to 'neutral'

EmptyTone
neutral
destructive
For a failed load rather than an empty one.
bordered

Defaults to false

boolean
class
string
classes
EmptyClasses

Per-part Tailwind overrides. class still covers the root.

icon
Snippet

Icon or illustration. A default inbox icon is used without one.

children
Snippet

Extra content between the text and the actions.

actions
Snippet

Buttons under the text.