EmptyState

What a list, a table or a search shows when it has nothing to show: what is empty, why, and the one thing to do about it.

import { EmptyState } from '@zitdevs/ui';

Examples

No invoices yet

Invoices appear here once a milestone is approved.

With an action, inside a card:

No closed projects

Projects show up here once you approve their last delivery.

See all projects

<Card padding="none">
  <EmptyState
    title="No closed projects"
    description="Projects show up here once you approve their last delivery."
    action={<Button label="See all projects" variant="secondary" size="sm" />}
  />
</Card>

Compact, as a section’s own heading:

No results for “Laravel”

Try fewer words, or clear the filters.

Clear the filters

<EmptyState
  compact
  level={2}
  icon="search"
  title="No results for “Laravel”"
  description="Try fewer words, or clear the filters."
  action={<Button label="Clear the filters" variant="ghost" size="sm" />}
/>

Props

Prop	Type	Default	Notes
title	string	required	What is empty, as a heading.
description	string	—	Why it is empty, or what fills it.
icon	IconName	'box'	Decorative, on a tile above the title.
action	ReactNode	—	What the reader can do next, usually one Button.
level	2 | 3 | 4	3	The title’s heading level: where it sits in the page’s outline.
headingId	string	—	The title’s id, for the region it fills to name itself after.
compact	boolean	false	32px above and below instead of 64px, for a card or a panel.
ref	Ref<HTMLDivElement>	—	The root.
className	string	—	Placement.
anything else	<div> attributes	—	On the root.

Exported types: EmptyStateProps.

Accessibility

• The title is a real heading at the level the page asks for, so a reader who moves by headings finds it, and headingId lets the region it fills name itself.
• The icon is decoration and hidden; the title says what is empty.
• Offer one action, the next step. If the empty state follows a search or a filter, the action undoes it.
• To announce an empty result that appears after a search, put the result count in a status message; the empty state itself is not a live region.

Without JavaScript

Server-rendered markup. Its action works as the control passed in does: a link or a form button works without a script.

Theming

primary-soft and primary (the icon’s tile), ink (the title), muted (the description).

Use instead: a failed request → Alert; content still loading → Skeleton.