EmptyState

A centred icon, title, description and optional action that turns "nothing here yet" into a useful next step.

When to use

• First-run views before any data exists ("No projects yet").
• Search or filter results that came back empty, with a way to widen them.
• After a bulk action clears a view; swapping the props morphs the icon and copy in place.
• Use Alert for errors that need attention, and Skeleton while data is still loading.

Usage

import { EmptyState } from "@/components/iris/empty-state/empty-state";

h(EmptyState, {
  title: "No projects yet",
  description: "Create a project to get its own Postgres database cell and connection strings.",
  action: h(Button, { size: "sm" }, "New project"),
});

Props

Prop	Type	Default	Description
title	string	— (required)	Short headline (rendered as h3).
description	string	— (required)	One or two sentences on why it is empty and what to do.
action	ReactNode	—	Button or link for the next step.
icon	ReactNode	folder glyph	24px glyph in the tile. A different icon component crossfades in.
label	string	—	Accessible name for the section region.
className	string	—	Extra class on the root.

Notes

• It has no border of its own; place it inside the panel, card or table body it describes.
• When title or description changes, the old copy lifts out, the new copy rises in and the height springs to fit; outgoing text is hidden from assistive tech. Reduced motion uses a short fade.
• Uses the theme's hover, line, ink, ink-2 and rounded-panel. The icon tile settles in once on mount (animate-empty-state-icon), and holds still under reduced motion.