EmptyStates

A showcase of four empty states (no results, offline, caught up, not found) in one line illustration whose shapes morph from scene to scene as you switch tabs.

When to use

• A reference or demo of how Iris UI empty states look and move, for example in a style guide.
• As a starting point to copy when you need an illustrated empty state with a morphing transition.
• Not as a drop-in empty state for a real list or page: use EmptyState, which takes your own title, text and action.

Usage

import { EmptyStates } from "@/components/iris/blocks/empty-states/empty-states";

h(EmptyStates);

Props

EmptyStates takes no props. The four scenes, their copy and their actions are authored in the block:

Tab	Empty state	Action, and what it does locally
No results	No results for "lease" (a Moria file search)	Clear filters: the scene turns into 4 results
Offline	You are offline (Meltemi's Outbox)	Try again: reconnects after a short wait
Caught up	Inbox zero (Entropost)	Check for mail: checks 3 accounts and stays at inbox zero
Not found	Page not found (a moved notdocs page)	Find the page: finds it in decisions

Each action flips its scene to a second state with a reverse action, so the whole loop can be explored.

Notes

• Tabs follow the ARIA tabs pattern (role="tablist", roving tabIndex, arrow keys). The illustration is an SVG with role="img" and a label per scene, and scene changes are announced in a polite live region.
• The art is drawn in currentColor and border tokens, so it follows the theme.
• Shapes morph on springs (position, size, radius, rotation, colour and outline points) and accent lines draw in a beat later. Under reduced motion the frames swap without morphing.