Display

EmptyState

The screen before there is anything to show — and the one after a load fails.

EmptyState

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

Notes

The shape enforces the three things that separate a dead end from a starting point: what is missing, why that is normal, and the action that fixes it.
A failure and an empty list are the same problem to the reader — "nothing here" — so tone="error" is the same layout rather than a second component with a second padding.
The description is capped at 42ch. An empty state that needs a paragraph is documentation wearing a component.

Examples

Nothing

Same layout for "nothing yet" and for "it failed", because to the reader both are "nothing here". The action is the point: an empty state without one is a dead end.

No posts scheduled

Produce a week from your editorial plan and everything lands here, ready to review.

Could not load metrics

Instagram returned 503. The data is fine — the connection is not.

API

Prop	Type	Default	Description
`title`	`string`	—	What is missing.
`description`	`string`	—	Why, in one sentence.
`tone`	`'empty' \| 'error'`	`'empty'`	`error` also announces itself as an alert.
`icon / actions`	`Snippet`	—	Optional glyph, and the buttons that end the emptiness.

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.